html中table使用详解+代码

一、表格的常用属性
基本属性有:width(宽度)、height(高度)、border(边框值)、cellspacing(表格的内宽,即表格与tr之间的间隔)、cellpadding(表格内元素的间隔,即tr与tr之间的间隔)、bordercolorlight(表格的亮边框颜色)、bordercolordark(表格的暗边框颜色)、bgcolor(表格的背景色)、background(表格的背景图片)、bordercolor(表格边框的颜色),

二、表格内部分隔线的属性
起作用的是rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表格的列;当rules=rows时,就隐藏了纵向的分隔线,也就是我们只能看到表格的行;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏,我们就只能看到一个表格的外框了。看一下下面的对比效果你就会明白的

a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是隐藏了横向分隔线的表格,即rules=cols
a
a
a
b
b
b
c
c
c
这是隐藏了纵向分隔线的表格,即rules=rows
a
b
c
a
b
c
a
b
c
这是隐藏了所有内部分隔线的表格,即rules=none

三、表格外部分隔线的属性
表格外边框的显示与隐藏,是可以用frame参数来控制的。注意:只对表格的外边框起作用,对内部边、线不起作用
只显示上边框


只显示下边框
只显示左、右边框
只显示上、下边框
只显示左边框
只显示右边框
不显示任何边框
看一下对比效果吧:
a
b
c
a
b
c
a
b
c
这是最普通的表格形式
a
b
c
a
b
c
a
b
c
这是只显示上边框的表格,即frame=above
a
b
c
a
b
c
a
b
c
这是只显示下边框的表格,即frame=below
a
b
c
a
b
c
a
b
c
这是只显示左、右边框的表格,即frame=vsides
a
b
c
a
b
c
a
b
c
这是只显示上、下边框的表格,即frame=hsides
a
b
c
a
b
c
a
b
c
这是只显示左边框的表格,即frame=lhs
a
b
c
a
b
c
a
b
c
这是只显示右边框的表格,即frame=rhs
a
b
c
a
b
c
a
b
c
这是不显示任何
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值