表格标记<table>....</table>,行标记<tr>....</tr>,单元格标记<td>....</td>,表格的标题<caption>....</caption>,表格的表头,表头一般位于表格第一行,用来表明该列的内容类别<th>....</th>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>单元格实例</title> 6 </head> 7 <h3>下面公布了某中学期中考试的成绩:</h3> 8 <table> 9 <caption> 10 期中考试成绩表 11 </caption> 12 <tr> 13 <th>姓名</th> 14 <th>语文</th> 15 <th>数学</th> 16 <th>英语</th> 17 <th>物理</th> 18 <th>化学</th> 19 </tr> 20 <tr> 21 <td>李1</td> 22 <td>94</td> 23 <td>89</td> 24 <td>87</td> 25 <td>56</td> 26 <td>97</td> 27 </tr> 28 <tr> 29 <td>孙2</td> 30 <td>94</td> 31 <td>87</td> 32 <td>84</td> 33 <td>86</td> 34 <td>87</td> 35 </tr> 36 <tr> 37 <td>王1</td> 38 <td>82</td> 39 <td>84</td> 40 <td>87</td> 41 <td>86</td> 42 <td>77</td> 43 </tr> 44 </table> 45 <body> 46 </body> 47 </html>
设置表格基本属性<table width="表格宽度" height="表格高度" align="表格对齐方式" border="表格边框宽度" bordercolor="边框颜色" cellspacing="内框宽度,即单元格之间的宽度" cellpadding="文字与边框的距离" bgcolor="表格背景颜色" background="背景图像地址">
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>设置表格属性</title> 6 </head> 7 <table background="1.jpg" border="1" bordercolor="#FF6633" width="600" height="600" cellspacing="3" cellpadding="10" align="center"> 8 <caption> 9 明日公司员工通讯录 10 </caption> 11 <tr> 12 <th>姓名</th> 13 <th>地址</th> 14 <th>电话</th> 15 <th>电子邮件</th> 16 </tr> 17 <tr> 18 <td>李小米</td> 19 <td>长春市天富家园</td> 20 <td>1556705****</td> 21 <td>1556705****@qq.com</td> 22 </tr> 23 <tr> 24 <td>刘晓晓</td> 25 <td>长春市明珠</td> 26 <td>1556705****</td> 27 <td>1556705****@qq.com</td> 28 </tr> 29 </table> 30 <body> 31 </body> 32 </html>
设置表格的行属性<tr height="表格中某行高度" bordercolor="边框颜色" bgcolor="背景颜色" align="行文字的水平对齐方式" valign="行文字的垂直对齐方式"></tr>
<caption align="表格标题的垂直对齐方式">表格的标题</caption>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>设置表格属性</title> 6 </head> 7 <table width="500" border="1" bordercolor="#0000FF"> 8 <caption align="bottom"> 9 某公司员工工资讯录 10 </caption> 11 <tr bgcolor="#33FFFF"> 12 <th>姓名</th> 13 <th>基本工资</th> 14 <th>岗位工资</th> 15 <th>绩效工资</th> 16 <th>工龄工资</th> 17 </tr> 18 <tr align="left" bordercolor="#FF0000"> 19 <td>李1</td> 20 <td>1000</td> 21 <td>600</td> 22 <td>800</td> 23 <td>400</td> 24 </tr> 25 <tr> 26 <td>王2</td> 27 <td>800</td> 28 <td>600</td> 29 <td>800</td> 30 <td>200</td> 31 </tr> 32 </table> 33 <body> 34 </body> 35 </html>
设置单元格属性,默认情况下,单元格的大小会根据内容自动调整,也可以进行手动调整<td width="单元格宽度" height="单元格高度">
单元格水平跨度和垂直跨度<td colspan="跨的列数" rowspan="单元格跨行数">
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>设置单元格行列跨度</title> 6 </head> 7 <table border="1" bordercolor="#00CCFF" cellspacing="0" cellpadding="5"> 8 <caption> 9 网上书店 10 </caption> 11 <tr> 12 <td colspan="2">销售分类</td> 13 </tr> 14 <tr> 15 <td rowspan="3">电脑书籍</td> 16 <td>编程类</td> 17 </tr> 18 <tr> 19 <td>图形图像类</td> 20 </tr> 21 <tr> 22 <td>数据库类</td> 23 </tr> 24 <tr> 25 <td rowspan="2">考试专区</td> 26 <td>中考高考</td> 27 </tr> 28 <tr> 29 <td>考研类</td> 30 </tr> 31 </table> 32 <body> 33 </body> 34 </html>
单元格对齐方式、单元格的背景色、单元格的边框颜色<td align="水平对齐方式" valign="垂直对齐方式" bgcolor="背景颜色" bordercolor="颜色代码">
单元格的亮边框、单元格的暗边框<td bordercolorlight="颜色代码" bordercolordark="颜色代码">
单元格的背景图像<td background="背景图片的地址">
表格的标头标记<thead bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></thead>,表格的表主体标记<tbody bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></tbody>,表格的表尾标记<tfoot bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></tfoot>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>设置表的样式</title> 6 </head> 7 <table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180"> 8 <caption> 9 某单位物理管理表 10 </caption> 11 <thead bgcolor="#FF0000" align="center" valign="middle"> 12 <tr> 13 <th>物品名</th> 14 <th>类型</th> 15 <th>领取人</th> 16 <th>领取人所属部门</th> 17 <th>数量</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>圆珠笔</td> 23 <td>文具</td> 24 <td>李小米</td> 25 <td>PHP</td> 26 <td>1</td> 27 </tr> 28 <tr> 29 <td>鼠标</td> 30 <td>电脑配件</td> 31 <td>潘小东</td> 32 <td>ASP.NET</td> 33 <td>1</td> 34 </tr> 35 <tr> 36 <td>打印纸</td> 37 <td>办公耗材</td> 38 <td>刘小欣</td> 39 <td>JAVA</td> 40 <td>30</td> 41 </tr> 42 </tbody> 43 <tfoot bgcolor="#00CCFF" align="right" valign="middle"> 44 <tr> 45 <td colspan="5">表格创建日期:2011-11-20</td> 46 </tr> 47 </tfoot> 48 </table> 49 <body> 50 </body> 51 </html>