HTML表格总结

用法一:完全用CSS样式控制table表格! // 用法二:table表格标签自带有border属性和cellspacing及其他属性,也可以控制表格! table { width: 300px; height: 300px; // 注:必...

HTML表格总结

• 作用
  • 之前：页面布局
  • 局部布局(批量显示的数据模块)
  • 原则
    • 能不用表格就不用，除了批量显示
      • 【有规律的网格的形式显示】的数据或内容
• table
  • 默认无边框
  • HTML属性
    • border="1”边框
    • cellspacing="0"单元格间距(单元格与单元格之间的距离)
    • cellpadding="0"单元格边距(内容和边框之间距离)
    • width
      • px
      • 百分比
• 标签
  • 基本结构
    • table>tr>td
  • 表格完整结构
    • table>thead tbody tfoot
    • thead tbody tfoot > tr >th或td
    • 固定嵌套
• 表格的标题
  • caption专指表格标题
    • 配合table使用
  • 必须放在table开始标签之后
• 单元格属性
  • width宽度
  • height高度
  • valign="top"
    • 单元格内容垂直方向的对齐方式
    • top
    • middle
    • bottom
  • align=""
    • 水平方向的对齐方式
    • left center right
• 表格的特性
  • 未固定宽度的表格，由内容撑开
  • 固定宽度，单元格默认平分它的宽度
  • 同一列只识别一个宽度，取最大值
  • 同一列只识别一个高度，取最大值
  • 默认th的内容水平垂直居中，文字加粗
  • 默认td内容垂直居中水平居左
• 表格跨行跨列合并
  • rowspan=“行数”跨行合并
  • colspan=“列数”跨列合并
• 常用table的css属性
  • 单元格间距
    • border-spacing:0;