2017-04-22 29 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>