前端全栈学习第四章
【摘要】 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）