HTML表格是一种在网页上展示数据的常用方式，它可以帮助我们将数据以清晰、有序的形式呈现出来，本文将详细介绍如何使用HTML制作表格，包括表格的基本结构、属性设置以及一些高级功能。
HTML表格基本结构
HTML表格由<table>标签定义，表格中的每一行由<tr>标签定义，每一列由<td>或<th>标签定义。<tr>表示表格行，<td>表示表格单元格(数据/普通单元格),<th>表示表格头部单元格(表头单元格)。
下面是一个简单的HTML表格示例：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
表格属性设置
1、边框设置：可以使用border属性为表格添加边框。
<table border="1"> ... </table>
2、对齐方式设置：可以使用align属性为表格的单元格设置对齐方式。
<table border="1">
<tr align="center">
...
</tr>
</table>
3、背景颜色设置：可以使用bgcolor属性为表格添加背景颜色。
<table bgcolor="yellow"> ... </table>
4、单元格宽度设置：可以使用width属性为单元格设置宽度。
<table border="1">
<tr>
<td width="100">姓名</td>
<td width="100">年龄</td>
</tr>
</table>
高级功能
1、排序和筛选：可以使用JavaScript对表格进行排序和筛选，使用jQuery UI的排序功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Sorting Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>25</td></tr>
<tr><td>李四</td><td>30</td></tr>
</tbody>
</table>
<button id="sortName">按姓名排序</button>
<button id="sortAge">按年龄排序</button>
<script>
$(function() { $("sortName").click(function() { $("myTable").sortTable({ sortKey: [1] }); }); $("sortAge").click(function() { $("myTable").sortTable({ sortKey: [0] }); }); }); function sortTable(oConfig){ oConfig = oConfig || {}; if (!oConfig.sortKey) return; this.sortKey = oConfig.sortKey; this.init(); var xColumnIndex = $('th').index($(this).find('button')[0]); var xLastColumnIndex = $('th').length-1; var xCount = $('tbody tr').length; for (var i=1; i<xCount+1; i++){ var xThisTd = $('tbody tr').eq(i-1).children().eq(xColumnIndex).children('input'); var xThatTd = $('tbody tr').eq(i).children().eq(xColumnIndex).children('input'); if (xThatTd[0].value == null) continue; if (typeof xThisTd[0].value != "undefined") xThisTd[0].value = parseInt(xThisTd[0].value); if (typeof xThatTd[0].value != "undefined") xThatTd[0].value = parseInt(xThatTd[0].value); var xTempValue = parseInt(xThisTd[0].value); if (xTempValue > parseInt(xThatTd[0].value)){ $('tbody tr').eq(i-1).before($('tbody tr').eq(i)); $('tbody tr').eq(i).insertBefore($('tbody tr').eq(i-1)); i--; xColumnIndex++; if (xColumnIndex == xLastColumnIndex) break; else if (i==xCount+1){ $('tbody tr').last().after($('tbody tr').eq(i-1)); break; }; }; }; }; $('myTable').sortTable(); }; $(document).ready(function(){ $("sortName").click(); }); </script>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/271419.html
微信扫一扫 