<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
th,td{
border: solid 1px blue;;
}
</style>
</head>
<body>
<!--表格
table 定义表格 表格里面可以放表格标题，行 列 单元格 以及其他元素
caption 定义表格标题 caption必须紧随table标签之后，只能为每个表格定义一个caption标题，通常会用在居中显示
<th> 定义表头单元格 th里面的文本通常会呈现粗体，居中显示
tr 定义一行
td 在表格中定义一个单元格，相当于列
thead 定义表头结构
tbody 定义表格主题结构
tfoot 定义页脚结构
col 定义针对一个或者多个列的属性值，只能用在<table>或者<colgroup>标签中使用
colgroup 定义表格列的分组 通过这个标签可以对表格格式化 只能在table中使用
-->
<!--设计一个标准的表格-->
<!--
<table>
<caption>符合标准的表格结构</caption>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
-->
<!--在使用thead tfoot tbody元素时候，必须使用全部元素，排列的顺序依次是 thead tfoot tbody
这样浏览器可以在获取所有数据之前呈现页脚 这些标签必须在table元素中使用 默认不会影响布局，在thead中必须包含tr标签
-->
<table>
<caption>结构化表格标签</caption>
<thead>
<tr>
<th>标签</th>
<th>说明</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">在表格中上述标签可选</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>thead</td>
<td>定义表头结构</td>
</tr>
<tr>
<td>thead</td>
<td>定义表头结构</td>
</tr>
<tr>
<td>thead</td>
<td>定义表头结构</td>
</tr>
</tbody>
</table>
<!--列分组表格
col colgroup 可以对表格中的列进行分组
col标签可以为表格中一个或者多个列定义属性值
在下面例子里面 align这个我只在ie7里面测试通过 由于浏览器不统一 所以不建议使用
col只能在table或者colgroup中使用，col元素仅包含属性的空元素 不能够有任何信息
-->
<table width="100%" border="1" >
<col align="left" />
<col align="center" />
<tr>
<td>慈母手中线</td>
<td>游子身上衣</td>
<td>临行密密缝</td>
</tr>
<tr>
<td>意恐迟迟归</td>
<td>谁言寸草心</td>
<td>报得三春晖</td>
</tr>
</table>
<!--colgroup用于对表格中列进行组合使用 只能在table中使用
span是colgroup和col的专有属性 规定列祖应该跨越的列数 ，取值为正 默认1
浏览器都支持col和colgroup 但是火狐 谷歌 苹果只支持这两个标签的span和width属性
下面实例中 color 和font-size都没有支持 但是ie支持的 但是还是不建议去使用
-->
<table width="100%" border="1">
<capion>关于colgroup的使用</capion>
<colgroup style="width: 25%;color: red" class="coll"></colgroup>
<colgroup style="width: 50%;color: blue"></colgroup>
<tr>
<td>慈母手中线</td>
<td>游子身上衣</td>
<td>临行密密缝</td>
</tr>
<tr>
<td>意恐迟迟归</td>
<td>谁言寸草心</td>
<td>报得三春晖</td>
</tr>
</table>
<!--关于表格属性
有几个专门的属性无法用cas去代替
border 定义表格边框，整数 0位不显示
cellpadding 定义数据表单元格的空白 定义单元格边缘和他内容之间的空白
cellspacing 定义数据表的边界 定义单元格和单元格之间的空白
width 定义宽度
frame 定义数据表外边框线显示 有待深入
rules 定义内边框线显示 有待深入
summary 定义表格的摘要
order-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值
下面是两种单线表格做法
-->
<table border="1" rules="all">
<tr>
<td>标题1</td>
<td>标题1</td>
</tr>
<tr>
<td>标题1</td>
<td>标题1</td>
</tr>
</table>
<table border="1" style="border-collapse: collapse">
<tr>
<td>标题1</td>
<td>标题1</td>
</tr>
<tr>
<td>标题1</td>
<td>标题1</td>
</tr>
</table>
</body>
</html>table小结（一）
最新推荐文章于 2022-01-07 14:56:33 发布
5917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
