<学习html>第五天笔记-表格table(创建表格、表格属性、表头标签、表格结构、表格标题标签、合并单元格)

来源:互联网 发布:cocos2d js protobuf 编辑:程序博客网 时间:2024/05/19 16:38

(十一)表格 table

1、创建表格
语法格式:

<table>    <tr>        <td>单元格内的文字</td>        .......    </tr></table>

<table></table>、<tr></tr>、<td></td>是创建表格的基本标签,缺一不可。
<table></table>用于定义一个表格;
②<tr></tr>用于定义表格中的一行,必须嵌套在<table></table>标签中;在table中包含有几对tr标签,就有几行表格;
<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,在tr标签中包含有几对<td></td>就表示该行中有多少单元格。

*注意
<tr></tr>中只能嵌套<td></td>
<td></td>中可以放所有元素

对于表格的宽度、高度和边框粗细的设置都放在<table.....></table>
例如:设置“表格的宽度为500像素,高度为300像素,边框为1像素”则代码如下:
<table width="500" height="300" border="1"></table>

2、表格属性
以下所有属性均是添加在<table........></table>

这里写图片描述
表格属性图

这里写图片描述
表格属性实例代码图

这里写图片描述
表格属性实例效果图

3、表头标签
表头一般位于表格的第一行或第一列,其文本加粗居中显示。
设置方法:用表头标签<th></th>替代相应单元格标签<td></td>即可。

4、表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚暂时不管)
<thead></thead>用于定义表格的头部。必须位于<table></table>标签中,一般包含网页的logo、导航等头部信息。
<tbody></tboby>用于定义表格的主体部分。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。

5、表格标题标签

<caption></caption>

语法格式:

<table>    <caption>我是表格标题</caption></table>

注意:<caption></caption>必须放在<table></table>中。即:<table><caption></caption></table>

6、合并单元格

①跨行合并:rowspan ②跨列合并:colspan
合并单元格的思想:将多个内容合并的时候,就会有多余的东西,将多余的东西删除。例如:把3个td合并成一个,那就多余了两个,需要删除。

公式:删除的个数=合并的个数-1

语法格式:<td rowspan="将要合并的单元格个数">单元格的文本内容</td>

合并的原则:合并时先保留上面的和左边的。

这里写图片描述
合并单元格实例代码图

这里写图片描述
合并单元格实例效果图

原创粉丝点击