HTML表格

基础表格

 

1、基础表格

       表格在HTML布局中起到了很大的作用，经常用于数据的展示，例如淘宝的购物单。

表格标签是<table>，<tr>是表格的行，<td>是单元格。

表格基本结构如下：

       <table>

                     <tr>

                            <td>……</td>

                            ……

                     </tr>

                     <tr>

　　　　　　　　<td>……</td>

                            ……

                     </tr>

       </table>

*边框属性border

 

表格操作

 

1、表格操作

在表格中添加行时复制一整个行直接添加即可，但是添加单元格需要注意每一行相对应的位置添加td标签，删除同理。

 

2带标题、表头和结构的表格

       <th>标签在表格内用来定义表头单元格，会让表格内容居中，加粗显示。表格宽高属性在<table>标签内设定，属性为height、width。<caption>标签可以为表格添加一个标题，必须写在紧随<table>标签之后，一个表格只能有一个<caption>标签。

表格结构标签可以优化表格的显示，在网页加载时可以加载一部分显示一部分，不需要等一整个表格加载完成再显示。

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

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

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

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

       语法：

              <table>

                     <caption>…</caption>

                     <thead>

                            <tr>

                                   <th>表头</th>

                            </tr>

                     </thead>

                     <tbody>

                            <tr>

                                   <td>主体</td>

                            </tr>

                     </tbody>

                     <tfoot>

                            <tr>

                                   <td>脚注</td>

                            </tr>

　　　　　　</tfoot>

              </table>

 

*<thead><tbody><tfoot>不会影响表格布局，但对表格进行了结构划分，优化了表格显示。

 

3、表格属性(1)

<table>表格属性

      

属性	值	描述
Width	Pixels、%	规定表格的宽度
align	Left、center、right	表格相对周围元素的对齐方式
border	Pixels	规定表格边框的宽度
Bgcolor	Rgb（x,x,x）、#xxxxxx、Colorname	表格的背景颜色
Cellpadding	Pixels、%	单元边沿与其内容之间的空白
Cellspacing	Pixels、%	单元格之间的空白
frame	属性值	规定外侧边框哪个部分是可见的
rules	属性值	规定内侧边框哪个部分是可见的

 

 

属性	值	描述
frame	void	不显示外侧边框
	above	显示上部的外侧边框
	below	显示下部的外侧边框
	hsides	显示上部和下部的外侧边框
	vsides	显示左边和右边的外侧边框
	lhs	显示左边的外侧边框
	rhs	显示右边的外侧边框
	box	在所有四个边上显示外侧边框
	border	在所有四个边上显示外侧边框

 

 

属性	值	描述
rules	none	没有线条
	groups	位于行组和列组之间的线条
	rows	位于行之间的线条
	cols	位于列之间的线条
	all	位于行和列之间的线条

4、表格属性(2)

<tr>标签属性

      

属性	值	描述
align	Left、center、right、justify、char	行内容的水平对齐
valign	Top、middle、bottom、baseline	行内容的垂直对齐
bgcolor	Rgb（x,x,x）、#xxxxxx、Colorname	行的背景颜色

 

 

属性	值	描述
bgcolor	colorname	规定颜色值为颜色名称的字体颜色（”red”）
	#xxxxxx	规定颜色值为十六进制值的字体颜色（”#ffffff”）
	Rgb（x,x,x）	规定颜色值为rgb代码的字体颜色（”rgb(255,0,0)”）

 

 

<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>内容的垂直对齐

 

5、表格跨行列

跨列属性colspan

       语法：

       <table>

                     <tr>

                            <td colspan=”2”>……</td>

                            ……

                     </tr>

                     <tr>

　　　　　　　　<td>……</td>

                            ……

                     </tr>

       </table>

*跨列多少colspan数值就是多少,相应的跨列单元格应删去，跨列后的单元格视为一个单元格。

 

跨行属性rowspan

       语法：

       <table>

                     <tr>

                            <td>……</td>

                            <td rowspan=“2“>……</td>

                            <td>……</td>

                     </tr>

                     <tr>

　　　　　　　　<td>……</td>

　　　　　　　　<td>……</td>

                     </tr>

       </table>

*rowspan属性写在开始要跨行的单元格，跨行多少rowspan数值就是多少，相应的跨行单元格应删去。

 

6、表格嵌套

嵌入的表格结构完整，写在<td>标签中

       语法：

       <table>

                     <tr>

                            <td>……</td>

                            <td>

                                   <table>

                                          <tr>

                                                 <td>……</td>

                                                 <td>……</td>

                                          </tr>

                                   </table>

　　　　　　　</td>

                     </tr>

       </table>

 

表格布局案例

布局原则：从大向里进行布局，先创建最外层的结构然后再深入布局，百分比数值设置长宽可以使表格在任意分辨率的网页中保持一定的比例。尽量少使用表格嵌套和表格的跨行跨列。