首页 >web前端 >html教程 >表格(TABLE)标记(TAGS)详细介绍_HTML/Xhtml_网页制作

表格(TABLE)标记(TAGS)详细介绍_HTML/Xhtml_网页制作

WBOY
WBOY原创
2016-05-16 16:40:541313浏览

表格的基本语法

...
- 定义表格
- 定义表行
- 定义表头
- 定义表元(表格的具体数据) 带边框的表格: 


复制代码
代码如下:




Food Drink Sweet
A B C

Food Drink Sweet
A B C


不带边框的表格:

复制代码
代码如下:




Food Drink Sweet
A B C


Food Drink Sweet
A B C

 跨多行、多列的表元(Table Span)

跨多列的表元


复制代码
代码如下:





Morning Menu
Food Drink Sweet
A B C


Morning Menu
Food Drink Sweet
A B C

跨多行的表元



复制代码
代码如下:






Morning Menu Food A
Drink B
Sweet C

Morning Menu Food A
Drink B
Sweet C

 表格尺寸设置

边框尺寸设置: 


复制代码
代码如下:




Food Drink Sweet
A B C

Food Drink Sweet
A B C

表格尺寸设置: 


复制代码
代码如下:




Food Drink Sweet
A B C

Food Drink Sweet
A B C

表元间隙设置: 


复制代码
代码如下:




Food Drink Sweet
A B C

Food Drink Sweet
A B C

表元内部空白设置: 


复制代码
代码如下:




Food Drink Sweet
A B C

Food Drink Sweet
A B C

 表格内文字的对齐/布局

#=left, center, right



复制代码
代码如下:








Food Drink Sweet
A B C

Food Drink Sweet
A B C

#=top, middle, bottom, baseline



复制代码
代码如下:










Food Drink Sweet Other
A B C D

Food Drink Sweet Other
A B C D

 表格在页面中的对齐/布局(Floating Table)


复制代码
代码如下:




Food Drink Sweet
A B C


My favorites...
cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

#=space value

复制代码
代码如下:




Food Drink Sweet
A B C


 My favorites...
cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

 表格的标题

... #=left, center, right

复制代码
代码如下:





Lunch
Food Drink Sweet
A B C

Lunch

Food Drink Sweet
A B C

... #=top, bottom

valign=top is default.


复制代码
代码如下:





Lunch
Food Drink Sweet
A B C


Food Drink Sweet
A B C
Lunch
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:HTML中绝对路径和相对路径的区别分析_HTML/Xhtml_网页制作下一篇:有没有仔细了解过标签 它是如何定义如何使用_HTML/Xhtml_网页制作

相关文章

查看更多