HTML表格详细笔记及使用方法

 HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

　HTML 表格的基本结构

<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列
<thead>…</thead> 定义表格表头，也就是表格的头部
<tbody>…</tbody>定义表格表身，也就是表格的主体内容。
<tfoot>…</tfoot> 定义表格表尾，也就是表格的结尾。

table标签定义HTML表格。

一个 HTML 表格包括 <table> 元素，一个或多个 、tr、th、和 td、元素。

<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

---

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

代码演示：

<table border="1">
    <tr>
        <th>表标题</th>
        <th>表标题2</th>
    </tr>
    <tr>
        <td>表内容2</td>
        <td>表内容1</td>
    </tr>
    <tr>
        <td>表内容3</td>
        <td>表内容</td>
    </tr>
</table>

代码演示效果：

表标题	表标题2
表内容2	表内容1
表内容3	表内容

属性

属性	值	描述
align	left center right	规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格的背景颜色。
border	1	规定表格单元是否拥有边框。
cellpadding	pixels	单元格内边距
cellspacing	pixels	单元格外边距
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
bordercolor	rgb(xxx) #fffff	设置把表格的边框线颜色
height	pixels %	规定表格的高度。
width	pixels %	规定表格的宽度。
rowspan	1	合并垂直水平方向的单元格
colspan	1	合并水平方向单元格

border属性值

<table border="1"> <!-- border:设置表格边框像素1px-->
<tr>
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
</tr>
<tr>
    <td>表格内容11</td>
    <td>表格内容22</td>
    <td>表格内容33</td>
</tr>
<tr>
    <td>表格内容111</td>
    <td>表格内容222</td>
    <td>表格内容333</td>
</tr>
<tr>
    <td>表格内容1111<td>
    <td>表格内容2222</td>
    <td>表格内容3333</td>
</tr>
</table>

代码演示如下：

表格内容1	表格内容2	表格内容3
表格内容11	表格内容22	表格内容33
表格内容111	表格内容222	表格内容333
表格内容1111	表格内容2222	表格内容3333

align属性：left、right、 center

<table border="1">    border:设置边框像素数值为数字，像素单位为px.  align:left 设置表格的周围元素向左对齐。
<tr align="left">
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
</tr>
<tr align="left">
    <td>表格内容11</td>
    <td>表格内容22</td>
    <td>表格内容33</td>
</tr>
<tr align="left">
    <td>表格内容111</td>
    <td>表格内容222</td>
    <td>表格内容333</td>
</tr>
<tr align="left">
    <td>表格内容1111<td>
    <td>表格内容2222</td>
    <td>表格内容3333</td>
</tr>
</table>

align属性： left

表格内容1	表格内容2	表格内容3
表格内容11	表格内容22	表格内容33
表格内容111	表格内容222	表格内容333
表格内容1111	表格内容2222	表格内容3333

代码演示如下： align="center"

<table border="1">    border:设置边框像素数值为数字，像素单位为px.  align:center 设置表格的周围元素居中对齐。
<tr align="center">
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
</tr>
<tr align="center">
    <td>表格内容11</td>
    <td>表格内容22</td>
    <td>表格内容33</td>
</tr>
<tr align="center">
    <td>表格内容111</td>
    <td>表格内容222</td>
    <td>表格内容333</td>
</tr>
<tr align="center">
    <td>表格内容1111<td>
    <td>表格内容2222</td>
    <td>表格内容3333</td>
</tr>
</table>

align属性： center

表格内容1	表格内容2	表格内容3
表格内容11	表格内容22	表格内容33
表格内容111	表格内容222	表格内容333
表格内容1111	表格内容2222	表格内容3333

align属性：right

<table border="1">    border:设置边框像素数值为数字，像素单位为px.  align:right 设置表格的周围元素向右对齐。
<tr align="center">
    <td>表格内容1</td>
    <td>表格内容2</td>
    <td>表格内容3</td>
</tr>
<tr align="center">
    <td>表格内容11</td>
    <td>表格内容22</td>
    <td>表格内容33</td>
</tr>
<tr align="center">
    <td>表格内容111</td>
    <td>表格内容222</td>
    <td>表格内容333</td>
</tr>
<tr align="center">
    <td>表格内容1111<td>
    <td>表格内容2222</td>
    <td>表格内容3333</td>
</tr>
</table>

代码演示如下： align="right"

表格内容1	表格内容2	表格内容3
表格内容11	表格内容22	表格内容33
表格内容111	表格内容222	表格内容333
表格内容1111	表格内容2222	表格内容3333

<table> 标签的常用属性:
border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
cellpadding="5"  单元格的上下间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色
​
<tr> 标签的常用属性:
bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)
​
​
<td>、<th> 标签的常用属性:
width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top) 

<table>
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

1	1
1	1

语法

<table frame="value"></table>

属性值

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

语法

<table rules="value"></table>

属性值

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