表格：table、tr、td 标签

鹤川

发布于 2023-03-21 21:42:20

2.3K0

发布于 2023-03-21 21:42:20

文章被收录于专栏：鹤川博客

表格：table、tr、td的使用

一、表格语法

表格标签 <table></table> 类似于 Excel 中的表格，是一个行、列组成的二维表格。
其中 <thead> 表示表格头，<tbody> 表示表格的主体
<tr> 表示一行
<th> 表示表格头 <thead>中的一列
<td> 表示表格中<tbody>的一列

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

二、代码实战

新建 html 文件 10-table.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>表格table</title>
    </head>
  
    <body>
        <tablestyle="width:50%;"border="1"cellspacing=0>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>学校</th>
                    <th>年龄</th>
                    <thcolspan="2">地址</th>
                    <!--<th>具体小区</th>-->
                </tr>
            </thead>
      
            <tbody>
                <tr>
                    <td>张三</td>
                    <tdrowspan="2">中华学校</td>
                    <td>14</td>
                    <td>北京</td>
                    <td>京京京-01</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <!--<td>中华学校</td>-->
                    <td>15</td>
                    <td>北京</td>
                    <td>北北北-01</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>北京中学</td>
                    <td>14</td>
                    <td>北京</td>
                    <td>北京小区-01</td>
                </tr>

            </tbody>
        </table>
  
    </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023 年 02 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html