表格的基本结构与属性

表格基本结构

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

<!-- 
    table 为表格
    tr 行
    td 列（每一个单元格）
-->

表格的html属性

1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"
   取值：left、right、center、
   valign=“垂直对齐” topottommiddle
8）合并单元格属性：(td)
  合并列： colspan=“所要合并的单元格的列数"
  合并行： rowspan=“所要合并单元格的行数”

数据行分组

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

数据列分组

<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->

列标题

<th></th>

表格标题

<caption></caption>

表格属性

1、单元格间距：border-spacing:value;
说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
2、合并相邻单元格边框：border-collapse:separate/collapse;
说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
3、无内容时单元格的设置：empty-cells:show/hide;
说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；
4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

表格制作的思路，首先确定表格为几行几列，然后进行表格的大的框架，合并列或者行最后进行写，格子大的则用width或者height进行设置。