当前位置:Gxlcms > html代码 > 表格(TABLE)标记(TAGS)详细介绍_HTML/Xhtml_网页制作

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

时间:2021-07-01 10:21:17 帮助过:47人阅读

表格的基本语法

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

带边框的表格:


代码如下:




FoodDrinkSweet
ABC

Food Drink Sweet
A B C


不带边框的表格:

代码如下:




FoodDrinkSweet
ABC


Food Drink Sweet
A B C

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

跨多列的表元


代码如下:





Morning Menu
Food Drink Sweet
ABC


Morning Menu
Food Drink Sweet
A B C

跨多行的表元



代码如下:






Morning Menu Food A
Drink B
Sweet C

Morning Menu Food A
Drink B
Sweet C

表格尺寸设置

边框尺寸设置:


代码如下:




FoodDrinkSweet
ABC

Food Drink Sweet
A B C

表格尺寸设置:


代码如下:




FoodDrinkSweet
ABC

Food Drink Sweet
A B C

表元间隙设置:


代码如下:




FoodDrinkSweet
ABC

Food Drink Sweet
A B C

表元内部空白设置:


代码如下:




FoodDrinkSweet
ABC

Food Drink Sweet
A B C

表格内文字的对齐/布局

#=left, center, right



代码如下:








FoodDrinkSweet
A B C

Food Drink Sweet
A B C

#=top, middle, bottom, baseline



代码如下:










FoodDrink SweetOther
A B C D

Food Drink Sweet Other
A B C D

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


代码如下:




FoodDrinkSweet
ABC


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


代码如下:




FoodDrinkSweet
ABC


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

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

表格的标题

... #=left, center, right

代码如下:





Lunch
FoodDrinkSweet
ABC

Lunch

Food Drink Sweet
A B C

... #=top, bottom

valign=top is default.


代码如下:





Lunch
FoodDrinkSweet
ABC


Food Drink Sweet
A B C
Lunch

人气教程排行