網頁

2019/7/16

HTML 練習 表格跨欄跨行

請建立一份HTML文件,檔名為table.html。請用VS Code編輯。

請用<table>繪製一張3列(row),5行(column)的表格如下。表格外框及欄位的邊線寬度為1px。第一列不用為標題。

第一列的第1格及第2格合併;
第一列的第4格,第5格與第二列的第4格,第5格合併;
第二列第1格與第三列第1格合併。



提示
HTML 使用colspan屬性合併表格欄位
HTML 使用rowspan屬性合併表格欄位

解答

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border:solid 1px;
}
</style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td colspan="2">1</td><td>3</td><td colspan="2" rowspan="2">4</td>
            </tr>
            <tr>
                <td rowspan="2">6</td><td>7</td><td>8</td>
            </tr>
            <tr>
                <td>12</td><td>13</td><td>14</td><td>15</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

沒有留言:

張貼留言