表格：table、tr、td的使用

阅读量: 138 编辑

表格：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>

二、代码实战

代码的详细解读，可以参考视频教程

文件：10.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Table</title>
    </head>
    <body>
        <table style="width: 100%; border: 1px solid #ccc;">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>登录名</th>
                    <th>学历</th>
                    <th>学校</th>
                </tr>

            </thead>

            <tbody style="text-align: center">

                <tr>
                    <td>张三</td>
                    <td>zhangsan</td>
                    <td>本科</td>
                    <td>清华大学</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>zhangsan</td>
                    <td>本科</td>
                    <td>清华大学</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>zhangsan</td>
                    <td>本科</td>
                    <td>清华大学</td>
                </tr>

            </tbody>

        </table>

    </body>
</html>
  • 目录