HTML表格

来自站长百科
跳转至: 导航、​ 搜索

HTML表格用< table >表示。一个表格可以分成很多行(row),用< tr >表示;每行又可以分成很多单元格(cell),用< td >表示。

'代码示例:'

带边框的表格:

<table border>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

<nowki></nowiki>

FoodDrinkSweet
ABC

'跨多行、多列的表元'

跨多列的表元

'代码示例:'

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

<nowki></nowiki>

Morning Menu
Food Drink Sweet
ABC

跨多行的表元

'代码示例:'

<table border>

<tr><th colspan=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>

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>

FoodDrinkSweet
ABC

'< table border cellspacing=#>'

代码示例(表元间隙设置):

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

FoodDrinkSweet
ABC

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

FoodDrinkSweet
ABC

'表格内文字的对齐/布局'

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

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

FoodDrink SweetOther
A B C D

表格的标题

< caption align=#> ... #=left, center, right,top, bottom 代码示例:
<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>

Lunch
FoodDrinkSweet
ABC