Contents
1 表格的基本语法
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)
eg:
<table border>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
2 表格跨行、跨列
跨多列的表元
<th colspan=#>
<table border>
<tr>
<th colspan=3> Morning Menu</th>
</tr>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
跨多行的表元 <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>
3 表格边框的设置
边框尺寸设置:
<table border=#>
<table border=10>
<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>
4 表格尺寸的设置
表格尺寸设置:
<table border width=# height=#>
<table border width=170 height=100>
<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>
5 表元间隙的设置
元间隙设置:
<table border cellspacing=#>
<table border cellpadding=#>
<table border cellspacing=10>
<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>
<table border cellpadding=10>
<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>
6 表格内文字的对齐/布局
水平布局:
<tr align=#>
<th align=#> #=left, center, right
<td align=#>
<table border width=160>
<tr>
<th>Food</th>
<th>Drink</th>
<th>Sweet</th>
</tr>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</tr>
</table>
垂直布局:
<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>
7 表格在页面中的布局
<table align=#> #=left,middle,right
8 表格的标题
<caption align=#> ... </caption> #=left, center, right
默认是水平居中的。
<caption valign=#> ... </caption> #=top, bottom
默认是垂直居上的。
9 表格的色彩
9.1 表元的背景色彩和背景图像
<th bgcolor=#>
<th background="URL">
表格边框的色彩:
<table bordercolor=#>
表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>
0