HTML学习之 表格

①表格标签

HTML表格标签
标签

意义

定义表格标题
定义表格中列的属性
定义表格列的组
定义表格
定义表格主体
定义表格单元
定义表格页脚
定义表格表头
定义表格页眉
定义表格的行

②一个简单的表格




	

下面是一个简单的表格

简单的表格
姓名 性别 年龄
张三 99

HTML学习之 表格_第1张图片

table 中的border属性值设为"1"表示该表格是一个有框的表格,如果改为

HTML学习之 表格_第2张图片

③突出表头

上个例子中,表格中的数据都为普通的单元,而“姓名”所在行的内容作为他们各自列的标题,应该突显出来。

将需要设置为表头的内容用

标签包围,即可将表头内容加粗居中显示。

④让写入的内容横向排列

上面的例子中之所以内容会竖向排列,是因为表格的宽度自适应内容,保证宽度最小的同时汉字自动换行了,如果我们在加一个比较长的数据:




	

下面是一个简单的表格

姓名 性别 年龄
简单的表格
姓名 性别 年龄 电话
张三 99 123456789

HTML学习之 表格_第3张图片

可以发现电话那行是横向排列的。

但并不是只能增长单元格内容的长度来迫使它写在一行,我们可以自行设置表格单元格的宽度。

比如设置为"500px":

HTML学习之 表格_第4张图片

⑤跨行或列的单元格




	

跨列

姓名 性别 年龄 电话 绰号
张三 99 123456789 老张 小三

跨行

姓名 张三
性别
年龄 99
电话 123456789
绰号 老张
小三

 

HTML学习之 表格_第5张图片

⑥单元格内可以添加其它标签




	

HTML学习之 表格_第6张图片

⑦单元格边距或间距




	
单元格内可以添加其他标签
段落:

第一个段落

第二个段落

一个表格:
1 2
3 4
一个列表:
  • A
  • B
  • C
一般内容
一般表格
1 2
3 4
设置了边距后
1 2
3 4

HTML学习之 表格_第7张图片

⑧添加背景颜色或背景图像




	
设置了间距后
1 2
3 4
蓝色背景的表格
1 2
3 4

HTML学习之 表格_第8张图片

⑨靠左或右排列内容




	
背景图片填充的表格
1 2
3 4

HTML学习之 表格_第9张图片

10.框架属性



frame="above":

表格
1 2
3 4
1 2
3 4

frame="below":

1 2
3 4

frame="box":

1 2
3 4

frame="hsides":

1 2
3 4

frame="vsides":

1 2
3 4

HTML学习之 表格_第10张图片

你可能感兴趣的:(web)