HTML表格：在colspan之后合并列？答案

【问题标题】：HTML Table: merging columns after colspan?HTML表格：在colspan之后合并列？
【发布时间】：2020-01-28 19:16:12
【问题描述】：

让我们考虑下表； jsfiddle：https://jsfiddle.net/cgfqu1ap/

<table border="1">
    <thead>
        <tr>
            <td></td>
            <td colspan="2"><b>Language</b></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2"><b>Semester</b></td>
            <td><b><i>Absences</i></b></td>
            <td><b><i>Grades</i></b></td>
        </tr>
        <tr>
            <td style="border-bottom-color: white">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </td>
            <td>
                <div>1</div>
                <div>2</div>
                <div>a</div>
            </td>
        </tr>
        <tr>
            <td><b>Master Grade</b></td>
            <td></td>
            <td>10</td>
        </tr>
        <tr>
            <td>Media</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

如何在Language 列中合并最后一行的第二列和第三列？

【问题讨论】：

使用colspan="2" 表示最后一行最后一行td

标签： html html-table

【解决方案1】：

使用 colspan='2'：

<table border="1">
    <thead>
        <tr>
            <td></td>
            <td colspan="2"><b>Language</b></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2"><b>Semester</b></td>
            <td><b><i>Absences</i></b></td>
            <td><b><i>Grades</i></b></td>
        </tr>
        <tr>
            <td style="border-bottom-color: white">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </td>
            <td>
                <div>1</div>
                <div>2</div>
                <div>a</div>
            </td>
        </tr>
        <tr>
            <td><b>Master Grade</b></td>
            <td></td>
            <td>10</td>
        </tr>
        <tr>
            <td >Media</td>
            <td colspan="2">10</td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案2】：

只需将colspan="2" 作为属性添加到td

<table border="1">
    <thead>
        <tr>
            <td></td>
            <td colspan="2"><b>Language</b></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2"><b>Semester</b></td>
            <td><b><i>Absences</i></b></td>
            <td><b><i>Grades</i></b></td>
        </tr>
        <tr>
            <td style="border-bottom-color: white">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </td>
            <td>
                <div>1</div>
                <div>2</div>
                <div>a</div>
            </td>
        </tr>
        <tr>
            <td><b>Master Grade</b></td>
            <td></td>
            <td>10</td>
        </tr>
        <tr>
            <td>Media</td>
            <td colspan="2">10</td>
        </tr>
    </tbody>
</table>

【讨论】：