编辑“HTML表格”

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

<font color=green>''''代码示例：''''</font>

带边框的表格： 

<nowiki><table border></nowiki>

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

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

<nowki></table></nowiki>

<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

<font color=blue>''''跨多行、多列的表元''''</font>

跨多列的表元 <th colspan=#>

<font color=green>''''代码示例：''''</font>

<nowiki><table border></nowiki>

<nowiki><tr><th colspan=3> Morning Menu</th></nowiki>

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

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

<nowki></table></nowiki>
<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>

跨多行的表元 <th rowspan=#>

<font color=green>''''代码示例：''''</font>

<nowiki><table border></nowiki>

<nowiki><tr><th colspan=3> Morning Menu</th></nowiki>

<nowiki><th>Food</th> <td>A</td></tr></nowiki>

<nowiki><tr><th>Drink</th> <td>B</td></tr></nowiki>

<nowiki><tr><th>Sweet</th> <td>C</td></tr></nowiki>

<nowiki></table></nowiki>
<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>


<font color=blue>''''表格尺寸设置''''</font>

<font color=green>''''< table border=#>''''</font>

代码示例（边框尺寸设置）： 

<nowiki><table border=10></nowiki>

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

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

<nowiki></table></nowiki>
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>


<font color=green>''''< table border width=# height=#>''''</font>

代码示例（表格尺寸设置）：

<nowiki><table border width=170 height=100></nowiki>

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

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

<nowiki></table></nowiki>
 
<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>

<font color=green>''''< table border cellspacing=#>''''</font>

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

<nowiki><table border cellspacing=10></nowiki>

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

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

<nowiki></table></nowiki> 
<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>

<font color=green>''''< table border cellpadding=#>''''</font>

代码示例（表元内部空白设置）：
 
<nowiki><table border cellpadding=10></nowiki>

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

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

<nowiki></table></nowiki>
<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>

<font color=blue>''''表格内文字的对齐/布局''''</font>

<font color=green>''''
< tr align=#> 

< th align=#> #=left, center, right

< td align=#>''''</font>

代码示例:

<nowiki><table border width=160></nowiki>

<nowiki><tr></nowiki>

<nowiki><th>Food</th><th>Drink</th><th>Sweet</th></nowiki>

<nowiki><tr></nowiki>

<nowiki><td align=left>A</td></nowiki>

<nowiki><td align=center>B</td></nowiki>

<nowiki><td align=right>C</td>  </nowiki>

<nowiki></table></nowiki>
<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>

<font color=green>''''
< tr valign=#> 

< th valign=#> #=top, middle, bottom, baseline

< td valign=#> ''''</font>

<nowiki><table border height=100></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><th>Food</th><th>Drink</th></nowiki><br>
<nowiki><th>Sweet</th><th>Other</th></nowiki><br>
<nowiki><tr></nowiki><br>
<nowiki><td valign=top>A</td></nowiki><br>
<nowiki><td valign=middle>B</td></nowiki><br>
<nowiki><td valign=bottom>C</td></nowiki><br>
<nowiki><td valign=baseline>D</td></nowiki><br>
<nowiki></table></nowiki>

<table border height=200>
<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>

<font color=blue>'''表格的标题'''</font>
< caption align=#> ... </caption> #=left, center, right,top, bottom

代码示例：<br>
<nowiki><table border></nowiki><br>
<nowiki><caption align=center>Lunch</caption></nowiki><br>
<nowiki><tr><th>Food</th><th>Drink</th><th>Sweet</th></nowiki><br>
<nowiki><tr><td>A</td><td>B</td><td>C</td>      </nowiki><br>
<nowiki></table></nowiki>
<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>

[[category:HTML]]