表格(TABLE)标记(TAGS)详细介绍

2020-04-15 22:16:17易采站长站整理

表格的基本语法

<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>

FoodDrinkSweet
ABC

不带边框的表格:

复制代码
<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

FoodDrinkSweet
ABC

 跨多行、多列的表元(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
FoodDrinkSweet
ABC

跨多行的表元 <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 MenuFoodA
DrinkB
SweetC

 表格尺寸设置

<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>

FoodDrinkSweet
ABC

<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>

FoodDrink