複数のヘッダーを追加した後にHTMLテーブルが乱雑になる

Question

メモ帳でHTMLを使用してWebサイトを作成する方法を学習しようとしています。テーブルでこの問題が発生しました。

何らかの理由で、複数のヘッダーを追加した後、私のテーブルがひどく台無しになってしまいます。私のテーブルには、右にシフトされます。

<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> 

Answer 1

私の貢献は、私はあなたが初めのための任意のユーチューブビデオよりも優れて訪問することをお勧めしますW3C siteから取ってきたこの表の例です。私は詳細を顕著にするためにそれを書式化しました。

.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>