2017-04-22 27 views
0

我想了解如何在记事本上使用HTML制作网站。我用表格遇到了这个问题。添加超过几个标题后,HTML表格变得杂乱

出于某种原因,我添加了多个标题之后,我的表格疯狂地搞砸了。我的表向右移:

<h4>Header 4:Table</h4> 
<table border="1"> 
    <th><h1>ItemX</h1></th> 
    <th><h1>ItemX</h1></th> 
    <th><h1>ItemX</h1></th> 
    <tr style = "font-family:courier;background-color:orange;"> 
     <td><b>Item<b><td> 
     <td><u>Item</u><td> 
     <td><p style="background-color:grey;color:green;">Item</p><td> 
     <td><a href="http://www.google.com">Item</a><td> 
     <td>Item<td> 
     <td><img src="https://s-media-cache-ak0.pinimg.com/736x/b7/ee/1e/b7ee1e0404e9ac12da5056a2d35df202.jpg" width = "50"></td> 
    </tr> 
    <tr> 
     <td>Item<td> 
     <td>Item<td> 
     <td>Item<td> 
     <td>Item<td> 
     <td>Item<td> 
     <td>Item<td> 
    </tr> 
+0

所以,你有你的代码中的问题,但你不分享。我们到底应该做什么? –

+0

欢迎来到SO。请同志分享你的代码。 https://stackoverflow.com/help/how-to-ask – Sam

+0

你可以在这里发布你的代码吗? –

回答

0

我的贡献是我从W3C site我建议您访问比任何YouTube视频的begining更好地采取了这种表的例子。我已将其程式化以使细节显着。

.black-table { 
 
border: 2px solid grey; 
 
font-family: 'Verdana'; 
 
color:white; 
 
background:#070a07; 
 
} 
 

 
.black-table th { 
 
border: 1px solid yellow; 
 
} 
 

 
.black-table td { 
 
border-bottom: 1px dashed white; 
 
} 
 

 
.black-table td.age { 
 
    text-align:center; 
 
    background-color: green; 
 
}
<table class="black-table" style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td class="age">50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td class="age">94</td> 
 
    </tr> 
 
</table>