HTML 表格

基础表格

<table>:表格

<tr>：行

<td>：单元格

例子：

<table >
<tr >
<td>日期</td>
<td>工资</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>9</td>
<td>10</td>
</tr>

</table>

 

-表格操作

<th></th> <!--表格头，内容居中，加粗显示，放在tr内-->

<caption></caption> <!-- 表格标题，显示居中，一个表格只能定义一个标题-->

 

-带结构的表格（解决加载时间过长，加载一部分，显示一部分）

表格划分三部分：表头、主体、脚注

thead:表格的头（放表格的表头）

tbody:表格的主体（放数据本体）

tfoot:表格的脚（放表格的脚注）

 

-表格属性

 

frame属性：

void:不显示外侧边框

above：显示上部的外侧边框

below：显示下部的外侧边框

hsides：显示上部和下部的外侧边框

vsides：显示左边和右边的外侧边框

lhs：显示左边的外侧边框

rhs：显示右边的外侧边框

box：在所有四个边上显示外侧边框

border：在所有四个边上显示外侧边框

 

rules属性：

none：没有线条

groups：位于行组和列组之间的线条

rows：位于行之间的线条

cols：位于列之间的线条

all：位于行和列之间的线条

例子：

<table width="500px" border="1" bgcolor="pink" cellspacing="5" cellpadding="10" frame="vsides" rules="rows">
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>课间活动</td>
<td>课间活动</td>
<td>课间活动</td>
<td>课间活动</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</table>

 

<tr>标签属性：

属性           值                                            描述

align:        left,center,right,justify,char          行内容的水平对齐

Valign:     top,middle,bottom,baseline           行内容的垂直对齐

Bgcolor:   rgb(x,x,x),#xxxxxx,colorname        行的背景颜色

 

<td>和<th>标签属性

属性	值	描述
align	left,center,right,justify,char	单元格内容水平对齐
valign	top,middle,bottom,baseline	单元格内容垂直对齐
bgcolor	rgb(x,x,x),#xxxxxx,colorname	单元格背景颜色
width	%,pixels	单元格的宽度
height	%,pixels	单元格的高度

 

<thead>、<tbody>、<tfoot>标签属性

属性	值	描述
align	left,center,right,justify,char	<thead>、<tbody>和<tfoot>内容的水平对齐
valign	top,middle,bottom,baseline	<thead>、<tbody>和<tfoot>内容的垂直对齐

 

 

表格跨行列：

跨列属性：colspan

跨行属性：rowspan

<thead>
<tr>
<th rowspan="2">城市</th>
<th colspan="2">2014年</th>
<th rowspan="2">2016年</td>
<th rowspan="2">2016年</th>
</tr>
<tr >

<th>上半年</th>
<th>下半年</th>

</tr>
</thead>

 

表格嵌套：

表格嵌套说明：1、完整表格结构 2、放到<td>标签中。

 

表格布局：

一般不适用border属性

 注意：1、尽量少使用表格嵌套；2、尽量少使用跨行跨列