HTML-Tabelle wird unordentlich, nachdem ich mehr als ein paar Header hinzufügen

Question

Ich versuche zu lernen, wie man eine Website mit HTML auf Notepad. Ich habe dieses Problem mit Tabellen festgestellt.

Aus irgendeinem Grund, nachdem ich mehr als einen Header hinzufügen, wird mein Tisch wahnsinnig vermasselt. Mein Tisch ist nach rechts verschoben:

<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

Mein Beitrag ist diese Tabelle Beispiel, das ich aus den W3C site genommen habe ich Sie empfehlen, besser zu besuchen als jedes YouTube-Video für den Beginn. Ich habe es stilisiert, um die Details bemerkenswert zu machen.

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