三、html表格标签用法了解
2023-08-05 本文已影响0人
by依白
运行环境:Windows 11 专业版，编辑器:Visual Studio Code
1.表格标题
| 表格整体大标题 | caption | 默认在表格整体顶部居中位置显示 |
|---|
| 表示一列小标题 | th | 通常用于表格第一行默认内部文字加粗并居中显示 |
|---|
注意点：caption标签写在table标签内部
th标签书写在tr标签内部
2.基本标签
| 表格整体 | 表格每行 | 表格单元格 |
|---|---|---|
| table | tr | td |
| 可用于包裹多个tr | 用于于包裹td | 包裹内容 |
tr标签只能包含td，td标签可以包含所有内容
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<caption>课程表</caption>
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
<tr><td>语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>物理</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>物理</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td>化学</td><td>语文</td><td>语文</td><td>数学</td><td>物理</td><td>语文</td><td>英语</td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</table>
</body>
</html>
注意点:标签的嵌套关系:table>tr>td
3.表格结构标签
不管是在学校还是其他网上的老师也好，我都很少见有人会去讲表格的结构标签，反正我的老师就没讲过，后面是我了解到的
| 表格头部 | 表格主体 | 表格底部 |
|---|---|---|
| thead | tbody | tfoot |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<caption>课程表</caption>
<thead> //表格头部
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
</thead>
<tbody>//表格主体
<tr><td>语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>物理</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>物理</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td>化学</td><td>语文</td><td>语文</td><td>数学</td><td>物理</td><td>语文</td><td>英语</td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</tbody>
<tfoot>//表格尾部
<tr><td>xxxx</td></tr>
</tfoot>
</table>
</body>
</html>
注意点:表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
这个只是方便我们看代码的时候能快速定位表格的结构部分
4.表格相关属性
| 标签 | 属性 |
|---|---|
| border | 边框宽度 |
| width | 表格宽度 |
| height | 表格高度 |
| cellspacing | 单元格间距 |
| cellpadding | 单元格填充 |
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px">
<caption>课程表</caption>
<thead> <!-- //表格头部 -->
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
</thead>
<tbody> <!-- //表格主体 -->
<tr><td>语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>物理</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>物理</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td>化学</td><td>语文</td><td>语文</td><td>数学</td><td>物理</td><td>语文</td><td>英语</td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</tbody>
<tfoot> <!-- //表格尾部 -->
<tr><td>xxxx</td></tr>
</tfoot>
</table>
</body>
</html>
5.合并单元格
| rowspan 跨行合并 | 将多行的单元格垂直合并 |
|---|---|
| colspan 跨列合并 | 将多列的单元格水平合并 |
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px">
<caption>课程表</caption>
<thead> <!-- //表格头部 -->
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
</thead>
<tbody> <!-- //表格主体 -->
<tr><td rowspan="3">语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td colspan="5">化学</td><td></td><td></td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</tbody>
<tfoot> <!-- //表格尾部 -->
<tr><td>xxxx</td></tr>
</tfoot>
</table>
</body>
</html>
必须把内容删除不然就是这种情况，会影响表格整体结构
image.png
注意点:只有同一个结构的标签中的单元格才能合并，不能跨结构合并（不能跨上面说的结构标签：thead、tbody、tfoot）
好了，今天讲的内容就到这里啦，有什么不懂的欢迎随时评论区交流或私信我，看到都会解答，仅限于文章内容，以上有什么讲的不规范的内容，欢迎大佬纠正我的错误
我是依白，虚心求学，不摆架子
