html表格内外边框颜HTML5表格简介
在  中我们已经聊到了表格标签，此标签在 HTML 静态页⾯布局中使⽤⾮常⼴泛，本⽂将详细地介绍表格的基本结构、表格的属性、表格结构化与直列化
1. 表格的基本结构
表格由 <table></table> 标签，内嵌⾏标签 <tr></tr>，再内嵌标签 <td></td> 组成，如果第⼀⾏为标题⾏，则第⼀⾏列标签换成 <th> </th>
基本语法如下：
<table>
<!-- 第⼀⾏ -->
<tr>
<td>标题1</td>
<td>标题2</rd>
<td>标题3</rd>
</tr>
<!-- 第⼆⾏ -->
<tr>
<td>内容1</td>
<td>内容2</rd>
<td>内容3</rd>
</tr>
<!-- 第三⾏ -->
<tr>
<td>内容1</td>
<td>内容2</rd>
<td>内容3</rd>
</tr>
</table>
2. 表格的基本属性
属性名称说明
border边框可设置表格整体边框粗细
height/ width⾼/ 宽设置表格⾼/ 宽
bgcolor背景颜⾊设置表格背景颜⾊
background背景设置背景，可为图⽚
bordercolor边框颜⾊设置表格边框颜⾊
cellspacing单元格间距设置单元格间距
cellpadding单元格间距设置单元格间距
align对齐属性设置对齐属性
valign垂直对齐垂直对齐
colspan/ rowspan单元格跨列/ ⾏设置单元格跨列/ ⾏
3. 表格结构化
表格结构化就是将表格分为表头、表体、表尾三部分，这样在修改其中⼀部分时就不会影响到其他部分，⽅便对表格进⾏操作。
⼀个完整的表格通常包括以下四个部分：
1）caption：表格的标题，通常出现在表格的顶部；
2）thead：定义表格表头，通常表现为标题⾏；
3）tbody：定义⼀段表格主体，⼀个表格可以有多个主体，可以按照⾏来进⾏分组；
4）foot：定义表格的脚尾，通常表现为总计⾏。
基本语法如下：
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾</td>
</tr>
</tfoot>
</table>
4. 表格的直列化
通过设置表格的直列化可以对表格的列进⾏分组，以便对其进⾏格式化
基本语法如下：
<!-- 前两列为⼀组 -->
<colgroup >
<!-- 第⼀列 -->
<col>
<!-- 第⼆列 -->
<col>
</colgroup>
<!-- 第三列 -->
<col >
5. 表格属性练习
写⼀段 HTML 代码，页⾯效果如下：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题-->
<h1 >特别休假申请单</h1>
<p>申请⽇期:  &emsp；年   ⽉   ⽇</p>
<!--设置表格属性-->
<table ;collapse border="1" width="600" cellspacing="0.1" cellpadding="5" bgcolor="" bordercolor="red">    <!--表格第⼀⾏内容-->
<tr>
<td>所属单位</td>
<td>&emsp；部&emsp；组&emsp；班</td>
<td>职称</td>
<td>111</td>
<td>姓名</td>
<td>111</td>
<td>⼚长</td>
</tr>
<tr>
<td rowspan="2">期间</td>
<td colspan="3">  &emsp；年  ⽉  ⽇</td>
<td colspan="2" rowspan="2">天数</td>
<td>111</td>
</tr>
<tr>
<td colspan="3">  &emsp；年  ⽉  ⽇</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">职务代理⼈</td>
<td colspan="4">盖章</td>
<td>111</td>
</tr>
<tr>
<td>到期⽇期</td>
<td colspan="3">  &emsp；年  ⽉  ⽇</td>
<td colspan="2">审核意见</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">全年特别休假</td>
<td colspan="2">   ；天</td>        <td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">已请假次数</td>
<td colspan="2">   ；天</td>        <td>⼈事主任</td>
<td>⼈事经办</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">本次申请⽇数</td>
<td colspan="2">   ；天</td>        <td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">尚剩余申请⽇数</td>
<td colspan="2">   ；天</td>    </tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。