HTML表格

时光毁灭记忆、已成空白 提交于 2020-01-01 01:27:20

表格结构:

 

<table>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td></td>
       <td></td>
       <td></td>
    </tr>
</table>

 

每一行单元格的数目必须一样

实例:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8 <table border="1">
 9     <tr>
10        <td>&nbsp</td>
11        <td>&nbsp</td>
12        <td>&nbsp</td>
13     </tr>
14     <tr>
15        <td>&nbsp</td>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18     </tr>
19     <tr>
20        <td>&nbsp</td>
21        <td>&nbsp</td>
22        <td>&nbsp</td>
23     </tr>
24 </table>
25 </body>
26 </html>

 

常用属性:

           border:边框的粗细

           bordercolor:边框颜色

           width:固定值或百分比

           height:固定值或百分比

           bgcolor:表格的背景颜色

           background:背景图片

           cellpadding:单元格边线到内容间的距离

           cellspacing:单元格之间的距离

           align:水平对齐方式

           rules:合并单元格边框线  取值:all  兼容性不好,最好使用css

 

<tr>

常用属性:

           bgcolor:

           height:行高  没有width

           align:文字水平居中

           valign:垂直居中  取值:top  middle  bottom

实例:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100" align="center" valign="middle" bgcolor="#FF0000">
10        <td>编号</td>
11        <td>姓名</td>
12        <td>性别</td>
13        <td>学历</td>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25        <td>&nbsp</td>
26     </tr>
27     <tr>
28        <td>&nbsp</td>
29        <td>&nbsp</td>
30        <td>&nbsp</td>
31        <td>&nbsp</td>
32     </tr>
33     <tr>
34        <td>&nbsp</td>
35        <td>&nbsp</td>
36        <td>&nbsp</td>
37        <td>&nbsp</td>
38     </tr>
39     <tr>
40        <td>&nbsp</td>
41        <td>&nbsp</td>
42        <td>&nbsp</td>
43        <td>&nbsp</td>
44     </tr>
45 </table>
46 </body>
47 </html>

 

<th>标题单元格  自动加粗居中

实例:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25        <td>&nbsp</td>
26     </tr>
27 </table>
28 </body>
29 </html>

 

<td>或<th>

常用属性:

          width:就是列宽

          height:就是行高

          bgcolor:

          background:

          align:

          valign:

          rowspan:上下合并单元格

          colspan:  左右合并单元格

实例:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td>&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td colspan="4">&nbsp</td>
23     </tr>
24     <tr>
25        <td colspan="3">&nbsp</td>
26        <td>&nbsp</td>
27     </tr>
28     <tr>
29        <td colspan="2">&nbsp</td>
30        <td>&nbsp</td>
31        <td>&nbsp</td>
32     </tr>
33 </table>
34 </body>
35 </html>

 

实例:

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <tr height="100">
10        <th>编号</th>
11        <th>姓名</th>
12        <th>性别</th>
13        <th>学历</th>
14     </tr>
15     <tr>
16        <td rowspan="4">&nbsp</td>
17        <td>&nbsp</td>
18        <td>&nbsp</td>
19        <td>&nbsp</td>
20     </tr>
21     <tr>
22        <td>&nbsp</td>
23        <td>&nbsp</td>
24        <td>&nbsp</td>
25 
26     </tr>
27     <tr>
28        <td>&nbsp</td>
29        <td>&nbsp</td>
30        <td>&nbsp</td>
31 
32     </tr>
33     <tr>
34        <td>&nbsp</td>
35        <td>&nbsp</td>
36        <td>&nbsp</td>
37 
38     </tr>
39 </table>
40 </body>
41 </html>

 

 表格标题:<caption></caption>

实例:

 

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8     <table border="1" width="500" rules="all" align="center">
 9     <caption><h1>标题</h1></caption>
10      <tr height="100">
11         <th>编号</th>
12         <th>姓名</th>
13         <th>性别</th>
14         <th>学历</th>
15      </tr>
16      <tr>
17         <td>&nbsp</td>
18         <td>&nbsp</td>
19         <td>&nbsp</td>
20         <td>&nbsp</td>
21      </tr>
22      <tr>
23         <td>&nbsp</td>
24         <td>&nbsp</td>
25         <td>&nbsp</td>
26         <td>&nbsp</td>
27      </tr>
28      <tr>
29         <td>&nbsp</td>
30         <td>&nbsp</td>
31         <td>&nbsp</td>
32         <td>&nbsp</td>
33      </tr>
34      <tr>
35         <td>&nbsp</td>
36         <td>&nbsp</td>
37         <td>&nbsp</td>
38         <td>&nbsp</td>
39      </tr>
40   </table>
41 </body>
42 </html>

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!