如何创建表格

什么样的信息适合在表格中呈现

如何表示复杂的数据表

当使用表格来表示信息时,首先要构造一个由行和列组成的网格

  • 用于创建表格的四个要素
  • 使用表格表示复杂的数据
  • 给表格添加说明

网格中的每个块称为表格中的单元格,在HTML中,表格按照的顺序逐行进行编写

基本的表格结构

<table>, 元素用来创建表格,表格的内容逐行编写

<tr>,你需要用起始标签<tr>来表示每行的开始,(tr)代表table row

<tr>之后是一个或多个<td>元素,(每个<td>元素代表所在行的一个单元格)在一行的结尾处要加上结束标签</tr>

<td>, 表格中的每个单元格用<td>元素来表示, table date,你需要在每个单元格的末尾加上结束标签</td>

表格的标题

<th>,元素和<td>元素的用法一样,它的作用是表示列或行的标题(th代表table heading)

* 即使一个单元格中没有内容,任需使用td 或th元素来表示一个空单元格的存在,否则该表将无法正确呈现

可在<th>元素上使用scope特征来表明此元素是列标题还是行标题。scope特征可以取以下值:row指明这是一个行标题,col指明这是一个列标题

跨行

有时候可能需要让表格中的某个单元格跨越多个列

我们可以在<th>或<td>元素中用colspan特性来表明单元格所要跨越的列数

 

跨行

有时候需要表中某个单元格跨越多行

可以在<th>或<td>元素中用使用rowspan特性里表明单元格所需要的行数

<td rowspan=”xx”> 江南未羊</td> , 实例就不写了

长表格

<thead>表格的标题应放在<head>元素中

<tbody>表格的主体部分应放在<tbody>元素中

<tfoot>表格的脚注应放在<tfoot>元素中

表格小结

  • <table>元素用来向网页中添加表格
  • 表格是逐行绘制的。行是有<tr>元素创建的
  • 每行中都有一定数量有<td>元素(表示标题时使用<th>元素)表示单元格
  • 可利用rowspan和colspan特性来使表格中的单元格跨越多行或者多列
  • 对于长表格,可将表格分成<thead><tbody><tfoot>三个部分。

 

发表评论

邮箱地址不会被公开。 必填项已用*标注

2 × 3 =