HTML - Tabelle Zelle Größen

Question

enter code here Ziemlich neu zu diesem und mein erstes HTML-Projekt. Darin muss ich eine Tabelle erstellen, die ich gut gemacht habe. Es ist jedoch nicht genau dasselbe. Hier ist, was ich habe:

<table> 
    <tr> 
     <td>1</td> 
     <td>Thunder Road</td> 
     <td>4:47</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>10th Avenue Freeze Out</td> 
     <td>3:10</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Night</td> 
     <td>3:00</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>Backstreet</td> 
     <td>6:29</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>Born To Run</td> 
     <td>4:29</td> 
    </tr> 
    <tr> 
     <td>6</td> 
     <td>She's The One</td> 
     <td>4:29</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>Meeting Across The River</td> 
     <td>3:15</td> 
    </tr> 
    <tr> 
     <td>8</td> 
     <td>Jungleland</td> 
     <td>9:33</td> 
    </tr> 
</table> 

Es soll aussehen wie this

Wie erhalte ich die Titelnummern Auflistung so fest in der Zelle zu sitzen? Ich habe Colspan und rowspan probiert und kann es nicht so bequem sitzen.

Auch habe ich nicht die Tabellenüberschriften in meinem HTML oben enthalten, aber ich habe es. Es gibt 2 Tabellenüberschriften, aber 3 Spalten unter der Überschrift. Wie bekomme ich alles, um gut zusammen zu sitzen, wie auf dem Bild, das ich verlinkt habe, und nicht wie meines?

Danke!

Answer 1

Ok ich sehe. Sie müssen den HTML, wie es unten ist:

<table border="1"> 

    <tr> 
     <td colspan="2">Bruce Springsteen<br>Born To Run</td> 
     <td><img src="https://upload.wikimedia.org/wikipedia/en/7/7a/Born_to_Run_(Front_Cover).jpg"></td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Thunder Road</td> 
     <td>4:47</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>10th Avenue Freeze Out</td> 
     <td>3:10</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Night</td> 
     <td>3:00</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>Backstreet</td> 
     <td>6:29</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>Born To Run</td> 
     <td>4:29</td> 
    </tr> 
    <tr> 
     <td>6</td> 
     <td>She's The One</td> 
     <td>4:29</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>Meeting Across The River</td> 
     <td>3:15</td> 
    </tr> 
    <tr> 
     <td>8</td> 
     <td>Jungleland</td> 
     <td>9:33</td> 
    </tr> 
</table> 

Sie können auch testen Sie es auf diesem JSFiddle.

Der Schlüssel war, colspan="2" auf dem <td> hinzuzufügen, der "Bruce Springsteen ..." schreibt, was bedeutet, dass diese Zelle den Platz von 2 Spalten einnehmen wird.

Hoffe das hat dir geholfen. Wenn es dir geholfen hat, kannst du meine Antwort annehmen und verbessern. Vielen Dank !