【3.2】HTML表格(tabLe)

一、表格

表格由 <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

Sam avatar
About Sam
专注生物信息 专注转化医学