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上进行测试。

关键是在写着“Bruce Springsteen ......”的colspan="2"上添加<td>，这意味着此单元格将取代2列。

希望这对你有所帮助。如果它对你有所帮助，你可以接受并提出我的答案。谢谢！

HTML - 表格单元格大小

1 个答案: