HTML表格的语法、使用

HTML 表格

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

HTML 表格的基本结构

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

table标签定义HTML表格。

一个 HTML 表格包括

元素，一个或多个 、tr、th、和 td、元素。

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

表格	描述
table	定义表格
caption	定义表格标题。
th	定义表格的表头。
tr	定义表格的行。
td	定义表格单元。
th	定义表格的页眉。
tb	定义表格的主体。
tf	定义表格的页脚。

表格样式属性：

属性	作用
text-align: left center right	规定表格相对周围元素的对齐方式。
background-color rgb(x,x,x) #xxxxxx colorname	规定表格的背景颜色。
border：1px solid red	规定表格单元是否拥有边框。
padding	单元格内边距
margin	单元格外边距
border-color rgb(xxx) 、#fffff	设置把表格的边框线颜色
height	规定表格的高度。
width	规定表格的宽度。
rowspan 2	合并垂直水平方向的单元格
colspan 2	合并水平方向单元格

<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 style="border: 1px solid red"> <!--table标签表格 -->
    <tr>
        <th rowspan="2">12</th><!-- rowspan 跨列-->
        <td colspan="2">13</td><!--colspan 跨行-->
        <td>14</td>
    </tr>
    <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
    </tr>
    <tr>
        <td>18</td>
        <td>19</td>
        <td>20</td>
    </tr>
</table>

<ul> <!--无序表格-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ol> <!--有序表格-->
    <li>标签1</li>
    <li>标签2</li>
    <li>标签3</li>
    <li>标签4</li>
    <li>标签5</li>
</ol>

效果演示：