表格(TABLE)标记(TAGS)详细介绍
table>
.../table>
- 定义表格
tr>
- 定义表行
th>
- 定义表头
td>
- 定义表元(表格的具体数据)
复制代码代码如下:
table border>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
不带边框的表格：
复制代码代码如下:
table>
tr>
th>
Food/th>
th>
Drink/th>
th>
Sweet/th>
tr>
td>
A/td>
td>
B/td>
td>
C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
跨多行、多列的表元(Table Span)
跨多列的表元 th colspan=#>
复制代码代码如下:
table border>
tr> th colspan=3> Morning Menu/th>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Morning Menu | ||
|---|---|---|
| Food | Drink | Sweet |
| A | B | C |
跨多行的表元 th rowspan=#>
复制代码代码如下:
table border>
tr> th rowspan=3> Morning Menu/th>
th> Food/th> td> A/td> /tr>
tr> th> Drink/th> td> B/td> /tr>
tr> th> Sweet/th> td> C/td> /tr>
/table>
| Morning Menu | Food | A |
|---|---|---|
| Drink | B | |
| Sweet | C |
表格尺寸设置
table border=#>
边框尺寸设置：复制代码代码如下:
table border=10>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
table border width=# height=#>
表格尺寸设置：复制代码代码如下:
table border width=170 height=100>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
table border cellspacing=#>
表元间隙设置：复制代码代码如下:@H_512_281@
table border cellspacing=10>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
table border cellpadding=#>
表元内部空白设置：复制代码代码如下:
table border cellpadding=10>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
表格内文字的对齐/布局
tr align=#>
th align=#> #=left, center, right
td align=#>
复制代码代码如下:
table border width=160>
tr>
th>
Food/th>
th>
Drink/th>
th>
Sweet/th>
tr>
td align=left>
A/td>
td align=center>
B/td>
td align=right>
C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
tr valign=#>
th valign=#> #=top, middle, bottom, baseline
td valign=#>
复制代码代码如下:
table border height=100>
tr>
th>
Food/th>
th>
Drink/th>
th>
Sweet/th>
th>
Other/th>
tr>
td valign=top>
A/td>
td valign=middle>
B/td>
td valign=bottom>
C/td>
td valign=baseline>
D/td>
/table>
| Food | Drink | Sweet | Other |
|---|---|---|---|
| A | B | C | D |
表格在页面中的对齐/布局(Floating Table)
table align=left>
复制代码代码如下:
table align="left" border>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
My favorITes...br> cookies, chocolates, and more.
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
My favorites...
cookies, chocolates, and more.
table align=right>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
My favorites...
cookies, chocolates, and more.
table vspace=# hspace=#> #=space value
复制代码代码如下:
table align="left" border vspace=20 hspace=30>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
my favorites...br> cookies, chocolates, and more.
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
My favorites...
cookies, chocolates, and more.
表格的标题
caption align=#>
... /caption>
#=left, center, right
复制代码代码如下:
table border>
caption align=center>
Lunch/caption>
tr>
th>
Food/th>
th>
Drink/th>
th>
Sweet/th>
tr>
td>
A/td>
td>
B/td>
td>
C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
caption valign=#> ... /caption> #=top, bottom
valign=top is default.
复制代码代码如下:
table border>
caption valign=bottom> Lunch/caption>
tr> th> Food/th> th> Drink/th> th> Sweet/th>
tr> td> A/td> td> B/td> td> C/td>
/table>
| Food | Drink | Sweet |
|---|---|---|
| A | B | C |
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 表格(TABLE)标记(TAGS)详细介绍
本文地址： https://pptw.com/jishu/587808.html