html表格详解
html表格详解
2010-08-28 17:49
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。这三个Tag是创建表格最常用的Tag。
<html> <body> <h4>两行(Row)三列(Column)的表格</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。要显示表格的边界，可使用border这个属性。
表格的表头
用<th>来表示表格的表头，表头的字是粗体显示的。
<html> <body> <h4>有表头的表格：</h4> <table border="1"> <tr> <th>姓名</th> <th>电话</th> <th>传真</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>竖直方向的表头：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>电话</th> <td>555 77 854</td> </tr> <tr> <th>传真</th> <td>555 77 855</td> </tr> </table> </body> </html>
空的单元格
如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTMLCharacter Entities)。
有标题的表格
这个示例演示如何用<caption>在一个表格上加上标题。
<html> <body> <table border="6"> <caption>表格标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
包含多列或多行的单元格
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。用 colspan 属性，设置包含多列的单元格；用rowspan这个属性，设置包含多行的单元格。
<html> <body> <h4>用 colspan 属性，设置包含多列的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">联系方式</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>用rowspan这个属性，设置包含多行的单元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">联系方式</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
单元格里的内容
单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。
单元格内容与单元格边界之间的距离
<html> <body> <h4>cellpadding属性值设置为3的表格：</h4> <table border="1" cellpadding="3"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> </body> </html>
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
单元格之间的距离
<html> <body> <h4>Cellspacing属性值设为2的表格：</h4> <table border="1" cellspacing="2"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> </body> </html>
这个示例教你如何用cellspacing这个属性设置单元格之间的距离。如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。
设置表格的背景颜色和背景图片
<html> <body> <h4>给表格设置背景颜色：</h4> <table border="1" bgcolor="red"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> <h4>给表格加背景图片：</h4> <table border="1"background="../images/html_tutorials/background.gif"> <tr> <td>第一</td> <td>行</td> </tr> <tr> <td>第二</td> <td>行</td> </tr> </table> </body> </html>
这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。
设置单元格的背景颜色和背景图片
<html> <body> <h4>单元格背景色：</h4> <table border="1"> <tr> <td bgcolor="red">第一</td> <td>行</td> </tr> <tr> <td background="../images/html_tutorials/background.gif">第二</td> <td>行</td> </tr> </table> </body> </html>
这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。背景颜色常用rrggbb 16 进制 RGB 数码，或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
单元格内容的对齐方式
<html> <body> <table width="350"border="1"> <tr> <th align="center">分数</th> <th align="center">期中考试</th> <th align="center">期末考试</th> </tr> <tr> <td align="left">姐姐</td> <td align="right">250.10</td> <td align="right">50000.20</td> </tr> <tr> <td align="left">菊花</td> <td align="right">1000.00</td> <td align="right">5000.45</td> </tr> <tr> <td align="left">jack</td> <td align="right">2000.40</td> <td align="right">500.00</td> </tr> <tr> <td align="left">黄新</td> <td align="right">300.50</td> <td align="right">800.65</td> </tr> </table> </body> </html>
这个示例教你如何用align属性设置单元格的对齐方式。对齐方式包括：左，中，右（left, center, right）；上，中，下，齐（top, middle,bottom, baseline ）。 baseline 表示文本的基线与表格的中线对齐。也就是文本出现在表格的中上部而不是正中央。如果文字不大的话，效果和middle差不多，比middle稍微靠上一点。
高级表格代码
表格边框颜色代码
<table bordercolor=#> <table cellspacing=5 border=5 bodercolor=#ffaa00><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>
| Food |
Drink |
Sweet |
| A |
B |
C |
表格边框色彩的亮度控制
<table bordercolorlight=#> <table bordercolordark=#> <table cellspacing=5 border=5 bordercolorlight=Whitebordercolordark=Maroon><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table>
| Food |
Drink |
Sweet |
| A |
B |
C |
表格分组显示代码
按行分组
<thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) <table border> <thead><tr><th>Food</th><th>Drink</th><th>Sweet</th></thead> <tbody><tr><td>A</td><td>B</td><td>C</td><tr><td>D</td><td>E</td><td>F</td></tbody> </table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
按列分组
<colgroup align=#> #=left, right, center <table border width=160> <colgroup align=left> <colgroupalign=center> <colgroup align=right> <thead><tr><th>Food</th><th>Drink</th><th>Sweet</th></thead> <tbody> <tr><td>A</td><td>B</td><td>C</td><tr><td>D</td><td>E</td><td>F</td></tbody> </table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数 <col align=#> #=left, right, center <table border width=160> <colgroup> <col align=center span=2><colgroup align=right> <thead><tr><th>Food</th><th>Drink</th><th>Sweet</th></thead> <tbody><tr><td>A</td><td>B</td><td>C</td><tr><td>D</td><td>E</td><td>F</td></tbody> </table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
表格边框显示/隐藏代码
显示所有 4 个边框
<table frame=box> <table border frame=box><thead><tr><th>Food</th><th>Drink</th><th>Sweet</th></thead> <tbody><tr><td>A</td><td>B</td><td>C</td><tr><td>D</td><td>E</td><td>F</td></tbody> </table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示上边框 <tableframe=above>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示下边框 <tableframe=below>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示上、下边框 <tableframe=hsides>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示左、右边框 <tableframe=vsides>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示左边框 <tableframe=lhs>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
只显示右边框 <tableframe=rhs>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
不显示任何边框 <tableframe=void>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
表格中分割线的显示
显示所有分隔线 <table rules=all>
<table borderrules=all> <colgroup><col align=center span=2> <colgroupalign=right> <thead><tr><th>Food</th><th>Drink</th><th>Sweet</th></thead> <tbody> <tr><td>A</td><td>B</td><td>C</td><tr><td>D</td><td>E</td><td>F</td></tbody> <tbody> <tr><td rowspan=3 align=right>Total$-00.0</td> </tbody> </table>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
| Total $-00.0 |
||
只显示组(Groups)与组之间的分隔线 <table rules=groups>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
| Total $-00.0 |
||
只显示行与行之间的分隔线 <tablerules=rows>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
| Total $-00.0 |
||
只显示列与列之间的分隔线 <tablerules=cols>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
| Total $-00.0 |
||
不显示任何分隔线 <tablerules=none>
| Food |
Drink |
Sweet |
| A |
B |
C |
| D |
E |
F |
| Total $-00.0 |
||
－－－－－－－－－－－－－－－－－－－－－－
设置表格的奇偶行颜色
<SCRIPT LANGUAGE="JavaScript">
window.onload = function() {
doubleBgColor(document.getElementById("table1"),"#cecece","#ececec")
}
function doubleBgColor(Table,Bg1,Bg2) {
for (var i=0;i<Table.rows.length;i++)Table.rows[i].bgColor=i%2?Bg2:Bg1;
}
</SCRIPT>
<TABLE border=0 cellpadding=1 cellspacing=1 id="table1"width="500">
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
<TR><TD> </TD></TR>
</TABLE>
<html>
<head>
<title>奇偶不同色</title>
<style>
.l1{background:#cccccc}
.l2{background:#f4f4f4}
</style>
<script>
function initUl(){
var a=document.getElementsByTagName('ul');
for (var i=0;i<a.length;i++){
var v=document.getElementsByTagName('li');
var ii=1;
for (var j=0;j<v.length;j++){
if (v[j].parentNode==a[i]){
if (ii++%2==0){
v[j].className="l2";
}
else{
v[j].className="l1";
}
}
}
}
}
</script>
</head>
<body onload="initUl()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
－－－－－－－－－
<style type="text/css">
<!--
.l1{ background:#ffffff}
.l2{ background:#ffffcc}
.foot_link{ float:left; width:959px;}
.foot_link ul{ margin:30px 0 0 0px; padding:0 ;}
.foot_link li{ float:left; margin:1; padding:5px 33px 5px 33px; height:15px;line-height:15px; list-style-type:none;border:#E4E0C8 1px solid;}
--!>
</style>
<script>
function initUl(){
var a=document.getElementsByTagName('ul');
for (var i=0;i<a.length;i++){
var v=document.getElementsByTagName('li');
var ii=1;
for (var j=0;j<v.length;j++){
if (v[j].parentNode==a[i]){
if (ii++%2==0){
v[j].className="l2";
}
else{
v[j].className="l1";
}
}
}
}
}
</script>
<body onload="initUl()">
<DIV class="foot_link"><ul>
<li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li><li>友情链接</li>
</ul></DIV>
</body>
转自：http://blog.csdn.net/nic7968/article/details/6637718