HTML 表格

表格由 <table> 标签来定义

每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)

字母 td 指表格数据(table data),即数据单元格的内容

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

HTML表格实例

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下:



HTML 表格和边框属性
如果不定义边框属性,表格将不显示边框

有时这很有用,但是大多数时候,我们希望显示边框
使用边框属性来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
在浏览器显示如下:


HTML 表格标签

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


表格三要素 table、tr、td 缺一不可

<table> 标签常用属性:

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="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) 
注意:引号里的数字和颜色代码均可以根据需求进行更改

表格结构语义标签:
  1.  <table>:表格根元素。
  2.  <thead>:表格头。
  3.  <tbody>:表格体。
  4.  <tfoot>:表格尾,一般可忽略该结构。
  5.  <tr>:表格行。
表格内容标签:
  1.  <th>:表头单元格。
  2.  <td>:表体单元格。
跨列:colspan
跨行:rowspan
单元格内边距:cellpadding
单元格外边距:cellspacing

col 和 colgroup 用于便捷定义表格指定列的样式