• Web开发——HTML基础（HTML表格 <table>）

    参考：

    目录：

    1、举例

    　　每个表格由 table 标签开始。
    　　每个表格行由 tr 标签开始。
    　　每个表格数据由 td 标签开始。

    　　举例1（表格）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10     
11         <h4>one column</h4>
12         <table border="1">
13             <tr>
14                 <td>100</td>
15             </tr>
16         </table>
17         
18         <h4>one row, three column</h4>
19         <table border="1">
20             <tr>
21                 <td>100</td>
22                 <td>200</td>
23                 <td>300</td>
24             </tr>
25         </table>
26         
27         <h4>two row, three column</h4>
28         <table border="1">
29             <tr>
30                 <td>100</td>
31                 <td>200</td>
32                 <td>300</td>
33             </tr>
34             <tr>
35                 <td>400</td>
36                 <td>500</td>
37                 <td>600</td>
38             </tr>
39         </table>
40     
41     </body>
42 </html>

    　　输出结果：

    　　举例2（表格边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with no border</h4>
12         <table>
13             <tr>
14                 <td>First</td>
15                 <td>row1</td>
16             </tr>
17             <tr>
18                 <td>Second</td>
19                 <td>row2</td>
20             </tr>
21         </table>
22         
23         <h4>two row, two column, with a normal border</h4>
24         <table border="1">
25             <tr>
26                 <td>First</td>
27                 <td>row1</td>
28             </tr>
29             <tr>
30                 <td>Second</td>
31                 <td>row2</td>
32             </tr>
33         </table>
34         
35         <h4>two row, two column, with rough border</h4>
36         <table border="8">
37             <tr>
38                 <td>First</td>
39                 <td>row1</td>
40             </tr>
41             <tr>
42                 <td>Second</td>
43                 <td>row2</td>
44             </tr>
45         </table>
46         
47         <h4>two row, two column, with thick border</h4>
48         <table border="16">
49             <tr>
50                 <td>First</td>
51                 <td>row1</td>
52             </tr>
53             <tr>
54                 <td>Second</td>
55                 <td>row2</td>
56             </tr>
57         </table>
58     
59     </body>
60 </html>

    　　输出结果：

    2、表格

    2.1 表格属性

    　　可选的属性：

    属性值描述
    align
    • left
    • center
    • right

    不赞成使用。请使用样式代替。

    规定表格相对周围元素的对齐方式。
    bgcolor
    • rgb(x,x,x)
    • #xxxxxx
    • colorname

    不赞成使用。请使用样式代替。

    规定表格的背景颜色。
    border pixels 规定表格边框的宽度。
    cellpadding
    • pixels
    • %
    		 规定单元边沿与其内容之间的空白。
    cellspacing
    • pixels
    • %
    		 规定单元格之间的空白。
    frame
    • void
    • above
    • below
    • hsides
    • lhs
    • rhs
    • vsides
    • box
    • border
    		 规定外侧边框的哪个部分是可见的。
    rules
    • none
    • groups
    • rows
    • cols
    • all
    		 规定内侧边框的哪个部分是可见的。
    summary text 规定表格的摘要。
    width                                                
    • %
    • pixels                                  
    		 规定表格的宽度。                                                                                                                                                

    全局属性

    　　<table> 标签支持 HTML 中的全局属性。

    事件属性

    　　<table> 标签支持 HTML 中的事件属性。

    　　表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    2.2 表格的表头

    　　表格的表头使用 <th> 标签进行定义。

    　　大多数浏览器会把表头显示为粗体居中的文本：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13             <tr>
14                 <th>Heading</th>
15                 <th>Another Heading</th>
16             </tr>        
17             <tr>
18                 <td>First</td>
19                 <td>row1</td>
20             </tr>
21             <tr>
22                 <td>Second</td>
23                 <td>row2</td>
24             </tr>
25         </table>
26     
27     </body>
28 </html>

     　　输出结果：

    2.3 表格中的空单元格

    　　举例1（带表头和表边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13             <tr>
14                 <th>Heading</th>
15                 <th>Another Heading</th>
16             </tr>        
17             <tr>
18                 <td></td>
19                 <td>row1</td>
20             </tr>
21             <tr>
22                 <td>Second</td>
23                 <td>row2</td>
24             </tr>
25         </table>
26     
27     </body>
28 </html>

    　　输出结果：

    　　举例2（无表头，不带表边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table>
13             <tr>
14                 <td></td>
15                 <td>row1</td>
16             </tr>
17             <tr>
18                 <td>Second</td>
19                 <td>row2</td>
20             </tr>
21         </table>
22     
23     </body>
24 </html>

    　　输出结果：

    2.4 带标题的表格

    　　举例（带边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>two row, two column, with a normal border</h4>
12         <table border="1">
13         <caption>My table title</caption>
14             <tr>
15                 <td>First</td>
16                 <td>row1</td>
17             </tr>
18             <tr>
19                 <td>Second</td>
20                 <td>row2</td>
21             </tr>
22         </table>
23     
24     </body>
25 </html>

    　　输出结果：

    2.5 跨行或者跨列的表格

    　　举例（带边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1</h4>
12         <table border="1">
13             <tr>
14                 <th>Name</th>
15                 <th colspan="2">Tel</th>
16                 <th colspan="3">Code</th>
17             </tr>
18             <tr>
19                 <td>name</td>
20                 <td>tel1</td>
21                 <td>tel2</td>
22                 <td>code1</td>
23                 <td>code2</td>
24                 <td>code3</td>
25             </tr>
26         </table>
27 
28         <h4>Table test1</h4>
29         <table border="1">
30             <tr>
31                 <th>Name</th>
32                 <td>name</td>
33             </tr>
34             <tr>
35                 <th rowspan="2">Tel</th>
36                 <td>tel1</td>
37             </tr>
38             <tr>
39                 <td>tel2</td>
40             </tr>
41             <tr>
42                 <th rowspan="3">Code</th>
43                 <td>code1</td>
44             </tr>
45             <tr>
46                 <td>code2</td>
47             </tr>
48             <tr>
49                 <td>code3</td>
50             </tr>                
51         </table>
52         
53     </body>
54 </html>

     　　输出结果：

    2.6 单元格的间距

    　　举例（带边框）：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1</h4>
12         <table border="1">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with cellspacing</h4>
26         <table border="1" cellspacing = "8">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

    　　输出结果：

    2.7 单元格的边距

    　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 without cellpadding</h4>
12         <table border="1">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with cellpadding</h4>
26         <table border="1" cellpadding = "8">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

    　　输出结果：

    2.8 向表格添加背景颜色或者背景图像

     　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 with bgcolor 1</h4>
12         <table border="1" bgcolor="red">
13             <tr>
14                 <td>Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td>Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25         <h4>Table test2 with bgcolor 2</h4>
26         <table border="1" bgcolor="baidu.jpg">
27             <tr>
28                 <td>Row1</td>
29                 <td>N1.1</td>
30                 <td>N1.2</td>
31             </tr>
32             <tr>
33                 <td>Row2</td>
34                 <td>N2.1</td>
35                 <td>N2.2</td>
36             </tr>
37         </table>
38     </body>
39 </html>

    　　输出结果：

    2.9 向表格单元添加背景颜色或者背景图像

    　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <h4>Table test1 with bgcolor 1</h4>
12         <table border="1">
13             <tr>
14                 <td bgcolor="red">Row1</td>
15                 <td>N1.1</td>
16                 <td>N1.2</td>
17             </tr>
18             <tr>
19                 <td bgcolor="baidu.jpg">Row2</td>
20                 <td>N2.1</td>
21                 <td>N2.2</td>
22             </tr>
23         </table>
24 
25     </body>
26 </html>

    　　输出结果：

    2.10 表格中排列内容（对齐方式）

    　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <table width="400" border="1">
12             <tr>
13                 <th align="left">Consumer projects</th>
14                 <th align="right">January</th>
15                 <th align="right">February</th>
16             </tr>        
17             <tr>
18                 <td align="left">Clothes</td>
19                 <td align="right">$241.10</td>
20                 <td align="right">$50.20</td>
21             </tr>
22             <tr>
23                 <td align="left">Cosmetics</td>
24                 <td align="right">$30.00</td>
25                 <td align="right">$44.45</td>
26             </tr>
27             <tr>
28                 <td align="left">Foods</td>
29                 <td align="right">$730.40</td>
30                 <td align="right">$650.00</td>
31             </tr>
32             <tr>
33                 <th align="left">Totals</th>
34                 <th align="right">$1001.50</th>
35                 <th align="right">$744.65</th>
36             </tr>
37         </table>
38 
39     </body>
40 </html>

    　　输出结果：

    2.11 表格frame属性（配置边框是否可见） 

    　　举例：

     1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6 
 7     </head>
 8     
 9     <body> 
10 
11         <p style="color: red"><strong>Table with frame="box":</strong></p>
12         <table frame="box">
13             <tr>
14                 <th>Month</th>
15                 <th>Savings</th>
16             </tr>
17             <tr>
18                 <td>January</td>
19                 <td>$100</td>
20             </tr>
21         </table>
22 
23         <p style="color: red"><strong>Table with frame="above":</strong></p>
24         <table frame="above">
25             <tr>
26                 <th>Month</th>
27                 <th>Savings</th>
28             </tr>
29             <tr>
30                 <td>January</td>
31                 <td>$100</td>
32             </tr>
33         </table>
34 
35         <p style="color: red"><strong>Table with frame="below":</strong></p>
36         <table frame="below">
37             <tr>
38                 <th>Month</th>
39                 <th>Savings</th>
40             </tr>
41             <tr>
42                 <td>January</td>
43                 <td>$100</td>
44             </tr>
45         </table>
46 
47         <p style="color: red"><strong>Table with frame="hsides":</strong></p>
48         <table frame="hsides">
49             <tr>
50                 <th>Month</th>
51                 <th>Savings</th>
52             </tr>
53             <tr>
54                 <td>January</td>
55                 <td>$100</td>
56             </tr>
57         </table>
58 
59         <p style="color: red"><strong>Table with frame="vsides":</strong></p>
60         <table frame="vsides">
61             <tr>
62                 <th>Month</th>
63                 <th>Savings</th>
64             </tr>
65             <tr>
66                 <td>January</td>
67                 <td>$100</td>
68             </tr>
69         </table>
70 
71     </body>
72 </html>

    　　输出结果：

    3、thead、tbody、tfoot

    　　对于结构复杂的表格，可以将表格分割成三个部分：题头、正文和题注。而这三个部分分别用：thead、tbody和tfoot来标注。

    • thead：表格的头，用来存放标题之类的内容。
    • tbody：表格的身体，用来存放数据本体内容。
    • tfoot：表格的脚，用来存放表格的脚注之类的内容。

    　　在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。

    　　一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。
  • 相关阅读:
    失衡天平
    简单 hash 入门题目
    美团codem 数列互质
    最小圆覆盖
    求1-n 中与 m 互质的素因子 （容斥原理）
    格式化输出;while循环;运算符
    python的历史 常量 注释 基础数据类型等基本操作 和if 判断语句
    异常的概念
    isinstance与issubclass
    面向对象——内置函数
  • 原文地址：https://www.cnblogs.com/zyjhandsome/p/9783476.html
Copyright © 2020-2023  润新知