网页编程基础第四章知识点总结——表格

网页编程基础第四章知识点总结——表格

知识点预览

表格模型

与表格有关的元素

举例——创建表格

caption表格的标注

行分组

定义列

列分组

跨行和跨列

 

表格模型

 

组织结构化的信息

与表格有关的元素

 

1.与表格有关的元素：table、tr、td、th（表的标注）、thead（表头分组）、tfoot（表尾分组）、tbody、colgroup（列分组）、caption（表格标题 显示在表格外面）

2.<table>元素

a)语法：

<table>——开始必需

内容：

</table>——结束必需

b)table元素的属性

                       i.通用属性：id、class、lang、dir、events、style、text、align

                     ii.cellpadding

                   iii.cellspaceing

                    iv.  border

                      v.frame

                    vi. rules

                  vii.width

                viii.summary

3. <tr>元素

a)语法：

<tr>——开始必需

内容：<td>、<th>

</tr>——结束可选

b)通用属性：id、class、lang、dir、title、style

c) 其他属性：

                       i.横向对齐：align 可取right、left、center、justify（两端对齐）、char（字符对齐）

                     ii.纵向对齐：valign，可取top、middle、bottom、baseline（基线对齐）

4.td>单元格数据

a)语法：

<td>——开始必需

内容：单元格数据

</tr>——结束可选

b)通用属性：id、class、lang、dir、title、style

c)其他属性：

                       i.横向对齐：align 可取right、left、center、justify（两端对齐）、char（字符对齐）

                     ii.纵向对齐：valign，可取top、middle、bottom、baseline（基线对齐）

                   iii.width

                    iv. height

                      v.bgcolor

                    vi. colspan：所跨列

                  vii. owspan：所跨行

 

举例——创建表格

 

caption表格的标注

1.语法

<caption>——开始必需

内容：表格名字

</caption>——结束必需

2.属性

align：可取bottom、center、left、right、top

3.注意事项

必须包含在table元素里，而且必须紧跟在table元素之后

行分组

1. <thead></thead>——表头行分组

a)语法：开始必需，结束可选

b)内容：一个或多个tr元素

2.<tbody></tbody>——表主体分组

a)语法：开始必需，结束可选

b)内容：一个或多个tr元素

3.<tfoot></tfoot>——表尾分组

a)语法：开始必需，结束可选

b)内容：一个或多个tr元素

定义列

1.<col>列元素

2.语法：

<col>——开始必需

……——无结束

3.属性

span

列分组

1.<colgroup>

2.语法：

<colgroup>——开始必需

内容：一个或多个col元素

</colgroup>——结束必需

3.属性

span

4. 作用

对表格中的列进行组合以及格式化

跨行和跨列

1.<td>/<th>元素

2.colspan

3.rowspan