• 目录

表格：table、tr、td 标签

阅读量: 750 编辑

表格：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>
<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>表格table</title>
    </head>
    
    <body>
        <table style="width:50%;" border="1" cellspacing=0>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>学校</th>
                    <th>年龄</th>
                    <th colspan="2">地址</th>
                    <!--<th>具体小区</th>-->
                </tr>
            </thead>
            
            <tbody>
                <tr>
                    <td>张三</td>
                    <td rowspan="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>
  • 目录