码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记(七)表格的应用

时间:2016-04-29 00:16:03      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:

     表格标记<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>

 

HTML学习笔记(七)表格的应用

标签:

原文地址:http://www.cnblogs.com/yyxiangjava/p/5437265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!