HTML表格

HTML表格

HTML表格格式

• <table border="" cellspacing="" cellpadding=""> <tr><th></th></tr> <tr><td></td></tr> </table>

表格的结构分解

• 表头 th

• 数据项

  • tr 行（一个tr代表一行）

  • td 单元格（一个td代表一列）

表格的常用属性

• border 边框

  • border="1px"

• csption 表格标题

• cellspacing 单元格间距

• cellpadding 内容的填充，内容与单元格的边距

• height 设置在tr里面，控制行高

• width 设置在td里面，控制列宽

  • 对于同一行的行高和同一列的列宽，其取决于最大的那个数值。

• bgcolor 设置背景颜色，可以为表格的任意位置设置

• bordercolor 表格边框的颜色，只能给整个表格边框设置颜色

• background 背景图片，优先级高于bgcolor ，bgcolor会失效

• align 对齐方式

  • center 居中

  • left 左对齐

  • right 右对齐

表格的补充

• thead 表头

  • th与td的区别，th会使文本内容加粗并居中

• tbody 主题内容 加与不加没有任何区别

• tfoot 页脚 加与不加没有任何效果

快捷键生成表格

• 快捷键

  • table[boder="1px" cellspacing="0px"]>tr[height="40px"]5>td[width="20px"]{$}7

  • 表达式中间不能出现空格

• 块选操作

  • 按住alt不要松，拖动光标

表格合并

• 列合并 colspan colspan="列数"，把多余td删除

• 行合并 rowspan rowspan="行数"，把多余td删除

表格的列分组标签

• <colgroup> <col span="列数" style="background-color: red;" /> <col span="列数" style="background-color: yellow;" /> </colgroup>