表格基本结构
1 <table> 2 <tr> 3 <td></td> 4 <td></td> 5 </tr> 6 </table> 7 8 <!-- 9 table 为表格 10 tr 行 11 td 列(每一个单元格) 12 -->
表格的html属性
1)width="表格的宽度"
2)height="表格的高度"
3)border="表格的边框"
4)bordercolor="边框色"
5)cellspacing="单元格与单元格之间的间距"
6)cellpadding=“单元格与内容之间的距离"
7)align="表格水平对齐方式"
取值:left、right、center、
valign=“垂直对齐” top\bottom\middle
8)合并单元格属性:(td)
合并列: colspan=“所要合并的单元格的列数"
合并行: rowspan=“所要合并单元格的行数”
数据行分组
1 <thead></thead> 2 <tbody></tbody> 3 <tfoot></tfoot>
数据列分组
1 <colgroup span="value"></colgroup> 2 <!--span属性为把几列分为一组-->
列标题
1 <th></th>
表格标题
1 <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进行设置。