HTML的table的 rowspan, colspan 用法

 1    <!--
 2             rowspan=x, 表示展几行,如学号,姓名等占两行,18占三行
 3             colspan=x, 表示占几列,如成绩占三列
 4   -->
 5         <table border="1" cellspacing="0">
 6             <tr>
 7                 <tr>
 8                     <th rowspan="2">学号</th>
 9                     <th rowspan="2">姓名</th>
10                     <th rowspan="2">年龄</th>
11                     <th colspan="3">成绩</th>
12                 </tr>
13                 <tr>
14                     <th>Java</th>
15                     <th>SQL</th>
16                     <th>HTML</th>
17                 </tr>
18             </tr>
19             <tr>
20                 <td>100001</td>
21                 <td>Tom</td>
22                 <td rowspan="3">18</td>
23                 <td>90</td>
24                 <td>85</td>
25                 <td>60</td>
26             </tr>
27             <tr>
28                 <td>100002</td>
29                 <td>Jerry</td>
30                 <td>85</td>
31                 <td>98</td>
32                 <td>95</td>
33             </tr>
34             <tr>
35                 <td>100003</td>
36                 <td>Mark</td>
37                 <td>80</td>
38                 <td>95</td>
39                 <td>80</td>
40             </tr>
41             
42         </table>

 

转载于:https://www.cnblogs.com/Lunix-touch/p/11229075.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 表格是一种用于在网页上呈现数据的标准方式。表格由行和列组成,其中每个单元格都可以包含文本、图像或其他内容。在这里,我将向你介绍 HTML 表格的基础知识和一些常见的用法。 1. 创建表格 要创建 HTML 表格,你需要使用`<table>`标签。`<table>`标签定义了表格的开始和结束,而其内部则包含一个或多个`<tr>`标签,表示表格的行。每个`<tr>`标签内部包含一个或多个`<td>`标签,表示表格的单元格。 下面是一个简单的例子: ```html <table> <tr> <td>单元格 1</td> <td>单元格 2</td> </tr> <tr> <td>单元格 3</td> <td>单元格 4</td> </tr> </table> ``` 这个例子创建了一个包含两行两列的表格,每个单元格中包含一些文本。在浏览器中查看这个 HTML 代码,你会看到一个简单的表格。 2. 合并单元格 有时候,你可能需要将多个单元格合并成一个单元格,以便呈现更复杂的数据。这可以通过使用`colspan`和`rowspan`属性来实现。 `colspan`属性指定要合并的列数,而`rowspan`属性指定要合并的行数。例如,如果你想将一个单元格合并到下一个单元格中,可以使用以下代码: ```html <table> <tr> <td>单元格 1</td> <td colspan="2">单元格 2 和 3</td> </tr> <tr> <td>单元格 4</td> <td>单元格 5</td> <td>单元格 6</td> </tr> </table> ``` 在这个例子中,第一行的第二个单元格和第三个单元格被合并成一个单元格。这个单元格跨越了两个列。 3. 设置表格样式 你可以使用 CSS 来为 HTML 表格设置样式。例如,你可以设置表格的边框、背景颜色、文本对齐方式等。 以下是一个简单的 CSS 代码,用于设置表格的样式: ```css table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; color: #333; } ``` 这个 CSS 代码设置了表格的边框合并、宽度、单元格内边距、文本对齐方式和表头的背景颜色。 4. 添加表头 在 HTML 表格中,你可以使用`<th>`标签来定义表头。表头通常用于显示每列的标题,并且会默认居中显示。 以下是一个带有表头的例子: ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小红</td> <td>20</td> <td>女</td> </tr> </table> ``` 在这个例子中,第一行使用`<th>`标签定义了表头。表头的内容会默认居中显示,并且会呈现粗体字体。 5. 排序表格 HTML 表格还支持通过点击表头来对表格中的数据进行排序。要实现这个功能,你需要使用 JavaScript。 以下是一个基本的 JavaScript 代码,用于对表格中的数据进行排序: ```javascript function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.getElementsByTagName("tr"); for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("td")[n]; y = rows[i + 1].getElementsByTagName("td")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } ``` 这个 JavaScript 代码会为表格添加一个排序功能。你可以通过点击表头来对表格中的数据进行排序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值