HTML09：表格标签

最新推荐文章于 2024-10-04 06:11:34 发布

MNox

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量54

点赞数

分类专栏：前端三剑客文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62820255/article/details/130283932

版权

前端三剑客专栏收录该内容

19 篇文章 0 订阅

订阅专栏



	单元格

黑框为一行，橙色填充为一列，每一小格为单元格。

表格标签：

1、表格<table>

2、行<tr>

3、单元格（列）<td>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <table>
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>男</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小红</td>
            <td>女</td>
        </tr>
        <tr>
            <td>003</td>
            <td>小强</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

快速生成表格结构：table>tr*2>td*2{单元格} （数字按需求定）

属性：

1、border:设置表格边框

2、width：表格宽度

3、height：表格高度

表格单元格合并：

一、水平合并：colspan

二、垂直合并：rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>合并A9、A10</p>
    <p>合并A7、A12</p>
    
    <table border="1" width="300px" height="200px">
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
            <td>A5</td>
        </tr>
        <tr>
            <td>A6</td>
            <td rowspan="2">A7、A12</td>
            <td>A8</td>
            <td colspan="2">A9、A10</td>
        </tr>
        <tr>
            <td>A11</td>
            <td>A13</td>
            <td>A14</td>
            <td>A15</td>
        </tr>
        <tr>
            <td>A16</td>
            <td>A17</td>
            <td>A18</td>
            <td>A19</td>
            <td>A20</td>
        </tr>
    </table>
</body>
</html>