CSS架构
表格:
1.元素:
表格的基本结构；
以table元素建立表格
tr元素是表格行，td元素是表示表格单元格
<body>
<!--<table> 表格以行和列表示容器元素
borber属性 默认的表格和单元格都有边框
表格默认是有宽度的单元格之和决定
-->
<table border="2">
<tr>
<!--
<td>元素 - 表示表格中的单元格
* 单元格默认宽度由内容决定
-->
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</table>
</body>表格的表头单元格；
th元素来定义表格行或列表头单元格
th元素中使用scope属性设置单元格的行和列表头
<body>
<tr>
<!--
<th>元素 - 表示表格中的表头
* 表头文本内容字体加粗
* 表头文本内容为水平方向居中
-->
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</body>表格的标题；
caption元素定义表格的标题
caption元素被定义在table元素中顶部
<table border="2">
<caption>登录人员表</caption>
<!--<caption>元素 表示表格的标题-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</table>
</body>跨行与跨列；
colspan属性是设置单元格横跨的列数
rowspan属性是设置单元格横跨的行数
<body>
<table border="2">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td rowspan="2">桐人</td>
<!--跨行时，会强制在被占的行里相应去掉一个单元格-->
<td colspan="2">17</td>
<!--跨列时，会强制在被占的列里相应去掉一个单元格-->
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
</tr>
</table>
</body>长表格；
thead元素；设置表格的页眉内容
tbody元素；设置表格的主题内容
tfoot元素；设置表格的页脚内容
<body>
<table border="2">
<caption>登录人员表</caption>
<!--<caption>元素 表示表格的标题-->
<thead>
<!-- 表格顶部 页眉<thead>元素 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<!-- 表格主体 主体<tbody>元素 -->
<tbody>
<tr>
<td>桐人</td>
<td>16</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>17</td>
<td>补师</td>
</tr>
</tbody>
<!-- 表格底部 页脚<tfoot>元素 -->
</table>
</body>2.样式:
表格布局；
以table-layout属性定义布局表格单元格
fixed值；
<style>
table {
table-layout: fixed;
/*table-layout 表示布局
auto：自动计算表格的宽和高度{由单元格内容决定}
加载速度慢
fixed：只加载首行单元格宽度，其之外的单元格不会影响表单宽度
加载速度快*/
}
</style>
</head>
<body>
<table border="2">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</table>
</body>表格标题；
以caption-side属性来是caption元素显示表格位置
有2个值表示；top表示表格的顶部，bottom表示表格的底部
<style>
caption{
caption-side: bottom;
/*caption-side属性 表示标题元素<caption>设置
top：默认值；表示标题出现在表格顶部
bottom：表示标题出现在表格底部
*/
}
</style>
</head>
<body>
<table border="1">
<!-- <caption>元素 - 表示表格中的标题 -->
<caption>登录人员表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</table>
</body>表格边框；
border-collapse属性来表示决定边框是分开还是合并
border-spacing属性设置相邻单元格边框之间距离
<style>
table, td {
/*
border属性；设置边框
border-width；设置边框宽度
border-style；设置边框样式
border-color；设置边框颜色
*/
border: 1px solid black;
/*
border-collapse属性；设置边框是分离还是合并
separate；默认值，表示分离
collapse；表示合并
*/
border-collapse: collapse;
/*
border-spacing属性；设置两个边框之间的距离
必须在border-collapse属性值为separate时才有效
*/
border-spacing: 10px;
}
</style>
</head>
<body>
<table>
<!--元素的属性border；表示同时设置单元格和表格的表框-->
<tr>
<td>姓名</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td>桐人</td>
<td>17</td>
<td>剑士</td>
</tr>
<tr>
<td>亚丝娜</td>
<td>16</td>
<td>补师</td>
</tr>
</table>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。