HTML表:在colspan之后合并列？

Question

让我们考虑下表；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列中的第三列合并？

​

​

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

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

​