【3.2】HTML表格（tabLe）

html 阅读量：次

一、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

不加边框就把border属性给去掉

#表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

#表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
 <tr>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

在浏览器中显示如下：

row 1, cell 1 row 1, cell 2
 row 2, cell 2

二、小技巧

2.1 HTML中设置td的字体颜色

body中可以直接设置字体颜色

<body text="green">

td中只可以设置背景颜色

<td bgcolor="gray">

通过font设置

<td><font size="3" color="red">This is some text!</font></td>

2.2 字体居中

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td align="right">$100</td>
  </tr>
</table>

语法：

<td align="value">
值 描述
left 左对齐内容（默认值）。
right 右对齐内容。
center 居中对齐内容。
justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
char 将内容对准指定字符。

2.3 调整cell中的字体与表框的距离

<td style="padding:5px"></td>

2.4 单元格合并

<td colspan="2">

<td rowspan='3'>

总结

table是一个比较古老的标签,它有很多自己的特性

  • table不会独占一行。需要主动设置其宽度，一般设置为100%，单元格会自动平均排列.
  • talbe可以设置 有三种边框，一种是最外层的table元素上的，一种是tr元素上的，一种是td元素上的。可以通过设置style来实现，table元素也可以通过设置border属性设置。一般我们仅仅设置td的边框，设置table的边框为0；
  • 边框的合并。默认talbe边框是叠一起的，视觉效果很差，通过设置border-collapse:collapse把边框合并.
  • 单元格的内边距。通过table标签的cellpadding属性设置，也可以设置td的padding样式
  • 单元格的间距：table标签的cellspacing属性和样式属性border-spacing控制边框的距离。
  • 单元格内容为空时，通过设置table标签样式属性:empty-cells:hide或show，是否显示边框
  • 单元格的合并：合并列：colspan=“2”(合并2个)，合并行rowspan=“2”(合并两行)，对应位置的td缺省即可。

table的使用场景：

  • 最适合做表格的标签，没有之一.自动适应，流式布局，强大。
  • 也可用于做自适应布局，模仿栅格布局，
  • 单元格会自动撑起排列，每行的单元格保持同样的高度,table-cell天然居中处理

案例

<table summary="cdr" class="table table-bordered table-hover" border="1" style="font-family: monospace ;font-size:14px;border-collapse:collapse">

参考资料

药企，独角兽，苏州。团队长期招人，感兴趣的都可以发邮件聊聊：tiehan@sina.cn
个人公众号，比较懒，很少更新，可以在上面提问题，如果回复不及时，可发邮件给我： tiehan@sina.cn