HTML表格：修订间差异

来自站长百科
跳转至： 导航、​ 搜索
无编辑摘要
 
无编辑摘要
 
（未显示1个用户的6个中间版本）
第25行： 第25行：


<nowiki><table border></nowiki>
<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><th>Food</th><th>Drink</th><th>Sweet</th></nowiki>
第35行： 第37行：
<tr><th>Food</th>      <th>Drink</th>  <th>Sweet</th>
<tr><th>Food</th>      <th>Drink</th>  <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
<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>
</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>


这三个Tag是创建表格最常用的Tag。 <br>
<font color=green>''''< table border cellpadding=#>''''</font>


<b><font style="font-size:120%">[[示例]]</font></b> <br>
代码示例（表元内部空白设置）：
<nowiki><table border cellpadding=10></nowiki>


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


border属性<br>
<nowiki><tr><td>A</td><td>B</td><td>C</td>      </nowiki>
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。<br>


<b><font style="font-size:120%">[[示例：不显示表格边界]]</font></b> <br>
<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>


要显示表格的边界，可使用border这个属性。<br>
<font color=blue>''''表格内文字的对齐/布局''''</font>


<b><font style="font-size:120%">[[示例：显示表格边界]]</font></b> <br>
<font color=green>''''
< tr align=#>  


表格的表头<br>
< th align=#> #=left, center, right
用<th>来表示表格的表头，表头的字是粗体显示的。<br>


<b><font style="font-size:120%">[[示例：有表头的表格]]</font></b> <br>
< td align=#>''''</font>


空的单元格<br>
代码示例:
如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个&nbsp;空格符。<br>


<b><font style="font-size:120%">[[示例2]]</font></b> <br>
<nowiki><table border width=160></nowiki>


更多示例<br>
<nowiki><tr></nowiki>
<b><font style="font-size:120%">[[有标题的表格]]</font></b> <br>


这个示例演示如何用<caption>在一个表格上加上标题。<br>
<nowiki><th>Food</th><th>Drink</th><th>Sweet</th></nowiki>


<b><font style="font-size:120%">[[包含多列或多行的单元格]]</font></b> <br>
<nowiki><tr></nowiki>


这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。<br>
<nowiki><td align=left>A</td></nowiki>


<b><font style="font-size:120%">[[单元格里的内容]]</font></b> <br>
<nowiki><td align=center>B</td></nowiki>


这个例子演示单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。<br>
<nowiki><td align=right>C</td> </nowiki>


<b><font style="font-size:120%">[[单元格与单元格边界间距离]]</font></b> <br>
<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>


这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。<br>
<font color=green>''''
<b><font style="font-size:120%">[[单元格之间的距离]]</font></b> <br>
< tr valign=#>  


这个示例教你如何用cellspacing这个属性设置单元格之间的距离<br>
< th valign=#> #=top, middle, bottom, baseline


<b><font style="font-size:120%">[[表格背景颜色和图片]]</font></b> <br>
< td valign=#> ''''</font>


这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。<br>
<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>


<b><font style="font-size:120%">[[单元格背景颜色和图片]]</font></b> <br>
<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>


这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。<br>
<font color=blue>'''表格的标题'''</font>
< caption align=#> ... </caption> #=left, center, right,top, bottom


<b><font style="font-size:120%">[[单元格内容的对齐方式]]</font></b> <br>
代码示例：<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>


这个示例教你如何用align属性设置单元格的对齐方式。<br>
[[category:HTML]]

2009年4月25日 (六) 16:01的最新版本

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
取自“https://www.zzbaike.com/wiki/index.php?title=HTML表格&oldid=20086”