Html table 合并单元格

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <ol>
 9     <li>基本表格</li>
10     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
11         <tr>
12             <td>1.1</td>
13             <td>1.2</td>
14             <td>1.3</td>
15         </tr>
16         <tr>
17             <td>2.1</td>
18             <td>2.2</td>
19             <td>2.3</td>
20         </tr>
21         <tr>
22             <td>3.1</td>
23             <td>3.2</td>
24             <td>3.3</td>
25         </tr>
26     </table>
27     <br/>
28     <li>表格合并列</li>
29     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
30         <tr>
31             <td colspan="3" >1.1</td>
32             <!--<td>1.2</td>-->
33             <!--<td>1.3</td>-->
34         </tr>
35         <tr>
36             <td>2.1</td>
37             <td>2.2</td>
38             <td>2.3</td>
39         </tr>
40         <tr>
41             <td>3.1</td>
42             <td>3.2</td>
43             <td>3.3</td>
44         </tr>
45     </table>
46     <br/>
47     <li>表格合并行</li>
48     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
49         <tr>
50             <td  rowspan="3">1.1</td>
51             <td>1.2</td>
52             <td>1.3</td>
53         </tr>
54         <tr>
55             <!--<td>2.1</td>-->
56             <td>2.2</td>
57             <td>2.3</td>
58         </tr>
59         <tr>
60             <!--<td>3.1</td>-->
61             <td>3.2</td>
62             <td>3.3</td>
63         </tr>
64     </table>
65     <br/>
66     <li>复杂表格</li>
67     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">
68         <tr>
69             <td >1.1</td>
70             <td colspan="2">1.2</td>
71             <!--<td>1.3</td>-->
72         </tr>
73         <tr>
74             <td >2.1</td>
75             <td rowspan="2">
76                 2.2
77                 <br/>
78                 3.2
79             </td>
80             <td>2.3</td>
81         </tr>
82         <tr>
83             <td>3.1</td>
84             <!--<td>3.2</td>-->
85             <td>3.3</td>
86         </tr>
87     </table>
88     <br/>
89 </ol>
90 </body>
91 </html>  

效果如下:

小注:

时间: 2024-10-23 13:14:53

Html table 合并单元格的相关文章

table合并单元格

新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

table合并单元格 colspan(跨列)和rowspan(跨行)

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

table 合并单元格方法

<span style="font-family:Microsoft YaHei;font-size:14px;">//合并单元格 function cellHandler(){ var tab = document.getElementById("data_table"); //maxCol循环列 var maxCol = 2, val, count, start; for(var col = maxCol-1; col >= 0 ; col--

一种HTML table合并单元格的思路

/** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从第一列开头到结束合并 */ function mergeCell(table1, startRow, mergeColArr){ var tb = document.getElementById(table1); var endRow=tb.rows.length; var colLen = tb.

bootstrap table合并单元格(该版本是简单的应用)

//获取列表数据 function loadTableData(tableId, request, data) { $.ajax({ type : "GET", url : request, contentType : 'application/json', dataType : "json", data : data, success : function(json) { //从后台获取到数据后进行表格的渲染 $('#featureBusinessClassify

table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

兄弟连学Python(06)---- table合并单元格colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格. colspan是"column span(跨列)"的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为"3", 令所在单元格横跨了三列.如果我们将colspan设为"2",则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器

css——table合并单元格

参考:https://www.cnblogs.com/yangwang12345/p/7840253.html 合并列——colspan 合并行——rowspan 合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的列会少一列 示意图: html: <table border="1" style={{margin:200}}> <tbody> <tr>

table合并单元格demo

图例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"