HTML表格

  一、基本语法

<table> <!-- 表格开始 -->
    <caption>..</caption><!-- 标题 -->
    <tr><!-- 行标签 -->
        <th></th><!-- 表格头内容居中 -->
        <td></td><!-- 单元格 -->
        ...
    </tr>
    <tr>
        <td></td>
        ...
    </tr>
</table><!-- 表格结束 -->

 

二、带结构的表格

格划分三部分:表头、主体、脚注

  • thead :表格的头 (放表格的表头 )
  • tbody :表格的主体(放数据本体)
  • tfoot :表格的脚(放表格的脚注)

注意：thead、tbody、tfoot内容位置的变化不会随着代码位置的变化而变化

例1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格2</title>
 6 </head>
 7 <body>
 8     <!-- 创建2行3列的表格 -->
 9     <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" >
10         <caption>前端工程师平均工资</caption>
11         <thead>
12         <tr>
13             <th>城市</th>
14             <th>2014年</th>
15             <th>2014年</th>
16             <th>2015年</th>
17             <th>2016年</th>
18         </tr>
19         </thead>
20         <tbody>
21         <tr>
22             <td>上海</td>
23             <td>8000</td>
24             <td>9000</td>
25             <td>10000</td>
26             <td>12000</td>
27         </tr>
28         </tbody>
29         <tfoot>
30         <tr>
31             <td>合计</td>
32             <td>8000</td>
33             <td>9000</td>
34             <td>10000</td>
35             <td>12000</td>
36         </tr>
37         </tfoot>
38     </table>
39 
40 </body>
41 </html>

它的效果图是这样的：

我们调整一下代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格2</title>
 6 </head>
 7 <body>
 8     <!-- 创建2行3列的表格 -->
 9     <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" >
10         <caption>前端工程师平均工资</caption>
11         <tbody>
12         <tr>
13             <td>上海</td>
14             <td>8000</td>
15             <td>9000</td>
16             <td>10000</td>
17             <td>12000</td>
18         </tr>
19         </tbody>
20         <thead>
21         <tr>
22             <th>城市</th>
23             <th>2014年</th>
24             <th>2014年</th>
25             <th>2015年</th>
26             <th>2016年</th>
27         </tr>
28         </thead>
29         
30         <tfoot>
31         <tr>
32             <td>合计</td>
33             <td>8000</td>
34             <td>9000</td>
35             <td>10000</td>
36             <td>12000</td>
37         </tr>
38         </tfoot>
39     </table>
40 
41 </body>
42 </html>

它的效果图还是和前面一样。

三、<table>表格属性

属性 值 描述
Width Pixels、% 规定表格的宽度
align Left、center、right 表格相对周围元素的对齐方式。
border pixels 规定表格边框的宽度。
Bgcolor

rgb(x,x,x)、#xxxxxx、

Colorname

 表格的背最颜色。
Cellpadding Pixels、% 单元边沿与其内容之间的空白。
cellspacing Pixels、% 单元格之间的空白。
frame 属性值 规定外侧边框的哪个部分是可见的
rules 属性值 规定内侧边柜的哪个部分是可见的

 

 

 

 

 

 

 

 

 

 

 

 

 

属性 值 描述
frame void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框

vsides		 显示左边和右边的外侧边框
Ihs
显示左边的外侧边框
rhs 显示右边的外侧边框
box
在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框
rules none 没有线条
groups 位于行组和列组之间的线条

rows		 位于行之间的线条
cols 位于列之间的线条
all
位于行和列之间的线条

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

四、<td>和<th>标签属性

 

属性 值 描述
align Left, center,right,justify, char 单元格内容的水平对齐
valign top,middle,bottom,baseline 单元格内容的垂直对齐
bgcolor rgb(x,x,x),#xxxxxx,colorname 单元格的背景颜色
width
%,pixels
 单元格宽度
height
%,pixels
 单元格高度

 

 

 

 

 

 

 

 

五、跨行跨列

跨行属性 rowspan

跨列属性colspan

代码演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格2</title>
 6 </head>
 7 <body>
 8     <!-- 创建2行3列的表格 -->
 9     <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center">
10         <caption>前端工程师平均工资</caption>
11         <thead>
12         <tr bgcolor="#d8e4bc">
13             <th rowspan="2">城市</th>
14             <th colspan="2">2014年</th>
15             <th rowspan="2">2015年</th>
16             <th rowspan="2">2016年</th>
17         </tr>
18         <tr bgcolor="#d8e4bc">
19             <th>上半年</th>
20             <th>下半年</th>
21         </tr>
22         </thead>
23         <tbody align="center" valign="middle">
24         <tr>
25             <td bgcolor="#b8cce4">北京</td>
26             <td>800</td>
27             <td>900</td>
28             <td>1000</td>
29             <td>1200</td>
30         </tr>
31         <tr>
32             <td bgcolor="#b8cce4">上海</td>
33             <td>800</td>
34             <td>900</td>
35             <td>1000</td>
36             <td>1200</td>
37         </tr>
38         </tbody>
39         <tfoot>
40         <tr align="center" valign="middle">
41             <td bgcolor="#b8cce4">合计</td>
42             <td>800</td>
43             <td>900</td>
44             <td>1000</td>
45             <td>1200</td>
46         </tr>
47         </tfoot>
48     </table>
49 
50 </body>
51 </html>

 

效果图

六、表格嵌套

可以在原来的表格里嵌套表格

但嵌套的表格必须有完整的结构，要放到<td> 标签里

演示代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格</title>
 6 </head>
 7 <body>
 8     <!-- 创建2行3列的表格 -->
 9     <table border="1" cellspacing="0">
10         <tr>
11             <td>2014年</td>
12             <td>2015年</td>
13             <td>2016年</td>
14         </tr>
15         <tr>
16             <td>
17                 <table border="1" cellspacing="0">
18                     <tr>
19                         <td>上半年</td>
20                         <td>下半年</td>
21                     </tr>
22                     <tr>
23                         <td>800</td>
24                         <td>900</td>
25                     </tr>
26                 </table>
27             </td>
28             <td>1000</td>
29             <td>1200</td>
30         </tr>
31     </table>
32 
33 </body>
34 </html>

 

效果图

 

 

七、

1.尽量少的使用表格嵌套

2.尽量少的使用表格跨行跨列

posted @ 2020-07-23 15:31  雪中加点糖  阅读(168)  评论(0)    收藏  举报