添加多个标题后，HTML表格变得混乱

Question

我正在尝试学习如何在记事本上使用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>

Answer 1

我的贡献是我从W3C site获取的这个表示例我建议您访问比任何YouTube视频更好的开始。我已将其设计风格化以使细节显着。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;