HTML5:表单

巧了我就是萌 提交于 2019-12-02 06:17:20

学习要点:
表格的基本构成
表格的属性
表格的合并
table:表格的范围,外框;用来定义表格,表格的其他元素包含在table标签里面;
tr: 表格的行;
td:表格的单元格
1.表格构成三个基本要素
table:表格的范围,外框;用来定义表格,表格的其他元素包含在table标签里面;
tr: 表格的行;
td:表格的单元格
2.一点说明:关于表格的属性

HTML5中删除了HTML4中table的大部分属性,HTML5中推荐使用CSS设定原来table属性实现的效果。对于HTNL5中已经废弃的大部分属性不在对其讲解
3.th元素:为表格添加标题行

th元素用来定义表格的标题单元格,他是tr元素的子元素,必须放在tr标签里边;tr元素的内容会自动居中对齐并加粗文字
4.colspan元素:横向合并单元格

属性值为正整数,表示该单元格合横向合并的列数,语法为 =“3”
5.rowspan元素:纵向向合并单元格

属性值为正整数,表示该单元格合纵向向合并的行数数,语法为 =“3”
6.caption元素:给表格添加标题

用来制定表格的标题或者说明;是table的子元素,必须放在table中使用
caption的align属性可以设置标题的位置,但是,在HTML5中已经被废弃,不推荐使用,建议使用CSS样式设置,后边课程会讲到。
7.thead\tfoot\tbaody元素

thead元素:表格的表头;tfoot元素:表格的页脚;tbaody元素:表格的主体;表格规范的写法应该包含这三部分内容
注:这三个主要结合CSS、javaScript来使用
8.colgroup元素

colgroup元素用来组合列,他的span属性可以设置组合列的数目。并是组合列具有相同的样式展示,它可以包含一个子元素 col;
colgroup元素为table元素的子元素,必须放在caption元素之后,thead元素之前。
9.col元素
可以单独设置一列的样式
col元素用来设定列的属性,他也可以使用span属性;
col元素一般作为colgroup元素的子元素配合使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" >
    <colgroup span="1" style="width: 120px"></colgroup>
      <colgroup span="4" style="width: 200px">
       <col style="background-color: cadetblue">
        <col style="background-color: rebeccapurple">
        <col style="background-color: yellowgreen">
        <col style="background-color: burlywood">

    </colgroup>
    <thead style="background-color: aqua">
    <tr><th colspan="5">表题</th></tr>
    </thead>
    <tbody >

    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td rowspan="2">单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td >单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    </tbody>
    <tfoot style="background-color: bisque">
    <tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
    </tfoot>
</table>

</body>
</html>

具体代码示例
实现效果

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!