首页 > 代码库 > web application——HTML表格

web application——HTML表格

2024-08-29 03:20:01   220人阅读

表格结构：

 

<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>

 

技术分享

 

web application——HTML表格


联系
我们