前端全栈学习第四章
【摘要】 1、表格标签1.1 表格元素1、表格用 <table> 标签定义，里面由若干行和列的单元格组成 2、在表格元素中，使用 <tr> 表示表格中的一行，使用 <td> 表示列 3、使用 <caption> 标签定义标题<table> <caption>表格标题</caption> <tr> <td>张三</td> <td>李四</td> <...
1、表格标签
1.1 表格元素
1、表格用 <table> 标签定义，里面由若干行和列的单元格组成
2、在表格元素中，使用 <tr> 表示表格中的一行，使用 <td> 表示列
3、使用 <caption> 标签定义标题<table>
<caption>表格标题</caption>
<tr>
<td>张三</td>
<td>李四</td>
<td>王五</td>
</tr>
</table>1.2 表格结构
1、<thead>: 定义表格的头部
2、<tbody>: 定义表格的主体
3、<tfoot>: 定义表格的底部2 行
2.1 表格的行
1、使用 <tr> 标签定义表格的行
2、<tr> 标签内部使用 <td> 标签表示一个单元格2.2 相关属性
table 的属性
border: 规定表格边框的宽度
width: 规定表格的宽度
height: 规定表格的高度
cellspacing: 规定单元格之间的空白
cellpadding: 规定单元边沿与其内容之间的空白3、列
3.1 表格的列
1、<td> 标签定义表格的列
2、<td> 常用的属性
colspan 定义单元格跨列的数目
rowspan 定义单元格跨行的数目
align 横向内容对齐方式
valign 纵向内容对齐方式
3、<th> 标签定义表格的表头
大多数浏览器会把表头显示为粗体居中的文本3.2 <col> 标签
为表格中一个或多个列定义属性值
1、align: 规定与 col 元素相关的内容的水平对齐方式
2、span: 规定 col 元素应该横跨的列数
3、width: 规定 col 元素的宽度
<col width="100" span="4"/>3.3 <colgroup> 标签
标签用于对表格中的列进行组合，以便对其进行格式化。
1、如需对全部列应用样式，<colgroup> 标签很有用，
这样就不需要对各个单元和各行重复应用样式了
2、<colgroup> 标签只能在 table 元素中使用
3、<clogroup> 标签用来存放 col 标签相关属性
1、align: 定义在列组合中内容的水平对齐方
2、span: 规定列组应该横跨的列数
3、width: 规定列组合的宽度
<colgroup span="2"></colgroup>4、表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<table border="1" cellspacing="0" align="center">
<caption>华为手机清单</caption>
<colgroup width="100" span="4"></colgroup>
<thead>
<tr>
<th>型号</th>
<th>图片</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>P40</td>
<td><img width=50 src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova7-5g/image-list/jennifer-sliver.png" alt="phone"></td>
<td>5000</td>
<td>2</td>
</tr>
<tr>
<td>Mate40</td>
<td><img width=50 src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova7-5g/image-list/jennifer-sliver.png" alt="phone"></td>
<td>4000</td>
<td>3</td>
</tr>
<tr>
<td>nova</td>
<td><img width=50 src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova7-5g/image-list/jennifer-sliver.png" alt="phone"></td>
<td>3000</td>
<td>5</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="4" bgcolor="yellow">总计: 37000</td>
</tr>
</tfoot>
</table>
</body>
</html>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）