跳到主要内容

CSS 表格属性

text-align 因为可继承，所以它可以在 <table> 、 <tr> 或 <td> 这 3 个标签中任意一个中设置，对单元格中内容的作用都是一样的；但 vertical-align 属性则不能从 <table> 标签中继承，但可以从 <tr> 标签中继承，所以只能出现在 <tr> 标签和 <td> 标签中。

vertical-align 属性用于设置单元格中内容的垂直对齐方式，跟网页中插入的图像的垂直对齐设置很类似，但单元格的垂直对齐方式没有图像的那么多。

单元格属性​

让表格没有凹凸感​

cellspacing 就是 td 和 td 之间的间距， cellpadding 属性用来指定单元格内容与单元格边界之间的空白距离的大小。

控制表格大小​

当没有指定表格宽度时，表格的大小及其各个单元格将会自动扩展，以适应放入其中的数据。不过，可以通过为 <table> 元素定义 CSS width 属性，来控制整个表格的宽度。也可以通过给 <td> 元素的 CSS width 属性，定义每个单元格的宽度。可以把 width 属性指定为像素、"字母 m 的宽度"（ em ）或百分比。

表格内的对齐​

表格垂直对齐 vertical-align 样式属性值： top 、 middle 、 bottom 、 text-top 、 text-bottom 和 baseline （用于文本）。

制作不规则的表格​

跨越（ spanning ）是强制一个单元格横跨表格的多行或多列的过程。 colspan 属性导致单元格横跨多列； rowspan 属性则对行产生相同的效果。

设置表格边框​

通过 table 的 border 属性可以规定表格单元周围是否显示边框。 border 值为 1 表示应该显示边框，且表格不用于设计目的。

跨单元格显示​

colspan 和 rowspan 属性分别用来定义单元格可跨行或跨列显示。

表头单元格​

使用 scope 属性可以将单元格与表头单元格联系起来

  • row 把该行所有的单元格与表头单元格联系起来
  • col 将当列所有的单元格与表头联系起来
  • rowgroup 将单元格所在的行组（由 <thead><tbody><tfoot> 标签定义）和表头绑定起来
<table border="1">
  <tr>
    <th></th>
    <th scope="col">月份</th>
    <th scope="col">金额</th>
  </tr>
  <tr>
    <td scope="row">1</td>
    <td>9</td>
    <td>100.02</td>
  </tr>
  <tr>
    <td scope="row"></td>
    <td>4</td>
    <td>10.25</td>
  </tr>
</table>

绑定表头​

使用 header 属性可以为单元格指定表头，该属性是一个表头名称的字符串。这些名称用 id 属性定义的不同的表头单元格的名称。

<table border="1" width="100%">
  <tr>
    <th id="name">姓名</th>
    <th id="Email">电子邮箱</th>
    <th id="Phone">电话</th>
    <th id="Address">地址</th>
  </tr>
  <tr>
    <td headers="name">张三</td>
    <td headers="Email">zhangsan@163.com</td>
    <td headers="Phone">13522228888</td>
    <td headers="Address">北京长安街38号</td>
  </tr>
</table>

单元格分类​

使用 axis 属性对单元格进行分类，用于相关信息进行的组合。在一个大型的数据表中往往塞满了数据，通过使用 axis 分类，浏览器可快速检索特定信息。

信息缩写​

<table border="1">
  <tr>
    <th>名称</th>
    <th>说明</th>
  </tr>
  <tr>
    <td abbr="HTML">HyperText Markup Language</td>
    <td>超级文本标记语言</td>
  </tr>
  <tr>
    <td abbr="CSS">Cascading Style Sheets | 层叠样式表</td>
  </tr>
</table>

表格各元素的 display 属性值​

display 属性可以设置标签作为一个盒子的类型。从盒子类型的角度来说，表格是一个特殊的对象，因为其中包含的每个标签对应不同类型的盒子。标签的 display 属性取不同的值，决定了盒子具有不同的类型。

标签display 属性设置描述
<table>display: table块级表格显示， 表格前后带有换行符
<caption>display: table - caption表格标题显示
<thead>display: table - header - group分组
<tbody>display: table - row - group分组
<tfoot>display: table - footer - group分组
<tr>display: table - row表格行显示
<th>、<td>display: table - cell单元格

display:table-caption 和 display:table-cell 这两个属性比较特殊，在于它们都能触发标签的 BFC 。