html之表格的语法和使用

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

表格的基本语法
table：定义一个表格
tr：定义表格行，必须嵌套在 <table> </table> 标签中
td：定义表格单元，必须嵌套在<tr></tr>标签中
字母 td 指表格数据（table data），即数据单元格的内容

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table标签定义 HTML 表格。

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

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

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

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

代码演示：

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

代码演示效果：

表标题1
表内容2
表内容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>表格内容1</td>
</tr>
<tr>
    <td>表格内容22</td>
    <td>表格内容22</td>
</tr>
<tr>
    <td>表格内容333</td>
    <td>表格内容333</td>
</tr>
<tr>
    <td>表格内容4444</td>
    <td>表格内容4444</td>
</tr>
</table>

代码演示如下：

表格内容1	表格内容1
表格内容22	表格内容22
表格内容333	表格内容333
表格内容4444	表格内容4444

align属性：left、right、 center

table border="1" border:设置边框像素数值为数字， 像素单位为px. align:left 设置表格的周围元素向左对齐。

代码演示：

<table>
<tr align="left">
    <td>表格内容1</td>
</tr>
<tr align="left">
    <td>表格内容22</td>
</tr>
<tr align="left">
    <td>表格内容333</td>
</tr>
</table>

align属性： left

演示结果：

表格内容1

表格内容22

表格内容333

table border=“1” border:设置边框像素数值为数字，像素单位为px. align:center 设置表格的周围元素居中对齐。

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 rules="value"></table>

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