HTML - Таблица Размеры ячеек

Question

enter code here Невероятно новый для этого и мой первый проект HTML. В этом я должен создать таблицу, которую мне удалось сделать хорошо. Однако это не совсем то же самое. Вот что у меня есть:

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

Он должен выглядеть this

Как получить трек-лист номера так плотно сидеть в этой клетке? Я пробовал colspan и rowspan и не могу заставить его сидеть так комфортно.

Кроме того, я не включил заголовки таблиц в свой HTML выше, но у меня есть это. Есть 2 заголовка таблицы, но 3 столбца под заголовком. Как мне получить все, чтобы сидеть вместе красиво, как на картинке, которую я связал, а не как моя?

Спасибо!

Answer 1

Хорошо, я вижу. Вам нужен HTML, как это ниже:

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

Вы также можете проверить его на этой JSFiddle.

Ключ должен был добавить colspan="2" на <td>, который пишет «Bruce Springsteen ...», что означает, что эта ячейка заменит 2 столбца.

Надеюсь, это вам помогло. Если бы это помогло вам, вы можете принять и поддержать мой ответ. Благодаря !