1. PingCode智库首页
  2. 百科

如何js在一张页面里有两个表格

Edit1 • • 百科

如何js在一张页面里有两个表格

在同一页面中创建两个表格的方法包括：使用多个表格标签、使用CSS进行样式调整、确保语义化的HTML结构。 其中，使用多个表格标签是最直接和常见的方法。你可以在HTML文档的同一页面中直接插入两个 <table> 标签，并根据需要进行调整和美化。下面将详细介绍如何实现这一点，并深入探讨其他相关技术和注意事项。

一、使用多个表格标签

1、基本HTML结构

在HTML中创建两个表格的最简单方法是直接使用两个 <table> 标签。下面是一个基本的示例：

<!DOCTYPE html>


<html>


<head>


    <title>两个表格示例</title>


</head>


<body>


<h2>表格一</h2>


<table border="1">


    <tr>


        <th>姓名</th>


        <th>年龄</th>


    </tr>


    <tr>


        <td>张三</td>


        <td>25</td>


    </tr>


    <tr>


        <td>李四</td>


        <td>30</td>


    </tr>


</table>


<h2>表格二</h2>


<table border="1">


    <tr>


        <th>产品</th>


        <th>价格</th>


    </tr>


    <tr>


        <td>笔记本电脑</td>


        <td>$1000</td>


    </tr>


    <tr>


        <td>手机</td>


        <td>$500</td>


    </tr>


</table>


</body>


</html>

在这个示例中，我们创建了两个表格，每个表格都有自己的标题和数据行。这种方法非常直观，适合初学者和简单的网页设计。

2、通过CSS进行样式调整

为了让页面更加美观和功能性更强，我们可以使用CSS对表格进行样式调整。以下是一个示例：

<!DOCTYPE html>


<html>


<head>


    <title>两个表格示例</title>


    <style>


        table {


            width: 50%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>表格一</h2>


<table>


    <tr>


        <th>姓名</th>


        <th>年龄</th>


    </tr>


    <tr>


        <td>张三</td>


        <td>25</td>


    </tr>


    <tr>


        <td>李四</td>


        <td>30</td>


    </tr>


</table>


<h2>表格二</h2>


<table>


    <tr>


        <th>产品</th>


        <th>价格</th>


    </tr>


    <tr>


        <td>笔记本电脑</td>


        <td>$1000</td>


    </tr>


    <tr>


        <td>手机</td>


        <td>$500</td>


    </tr>


</table>


</body>


</html>

这个示例使用了CSS来调整表格的宽度、边距、边框和填充。通过这种方式，可以使表格看起来更加专业和一致。

二、语义化的HTML结构

1、使用合适的标签和属性

在HTML中创建表格时，使用合适的标签和属性可以增强页面的语义化和可读性。例如，使用 <thead>、<tbody> 和 <tfoot> 标签来分隔表头、主体和表尾：

<!DOCTYPE html>


<html>


<head>


    <title>两个表格示例</title>


    <style>


        table {


            width: 50%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>表格一</h2>


<table>


    <thead>


        <tr>


            <th>姓名</th>


            <th>年龄</th>


        </tr>


    </thead>


    <tbody>


        <tr>


            <td>张三</td>


            <td>25</td>


        </tr>


        <tr>


            <td>李四</td>


            <td>30</td>


        </tr>


    </tbody>


    <tfoot>


        <tr>


            <td colspan="2">表格一的表尾</td>


        </tr>


    </tfoot>


</table>


<h2>表格二</h2>


<table>


    <thead>


        <tr>


            <th>产品</th>


            <th>价格</th>


        </tr>


    </thead>


    <tbody>


        <tr>


            <td>笔记本电脑</td>


            <td>$1000</td>


        </tr>


        <tr>


            <td>手机</td>


            <td>$500</td>


        </tr>


    </tbody>


    <tfoot>


        <tr>


            <td colspan="2">表格二的表尾</td>


        </tr>


    </tfoot>


</table>


</body>


</html>

这种方法不仅可以提高代码的可读性，还可以帮助搜索引擎更好地理解页面的内容，提升SEO效果。

2、结合ARIA属性增强无障碍性

为了增强网页的无障碍性，可以结合ARIA（Accessible Rich Internet Applications）属性来提供更多的语义信息。例如：

<!DOCTYPE html>


<html>


<head>


    <title>两个表格示例</title>


    <style>


        table {


            width: 50%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>表格一</h2>


<table role="table">


    <thead>


        <tr role="row">


            <th role="columnheader">姓名</th>


            <th role="columnheader">年龄</th>


        </tr>


    </thead>


    <tbody>


        <tr role="row">


            <td role="cell">张三</td>


            <td role="cell">25</td>


        </tr>


        <tr role="row">


            <td role="cell">李四</td>


            <td role="cell">30</td>


        </tr>


    </tbody>


    <tfoot>


        <tr role="row">


            <td role="cell" colspan="2">表格一的表尾</td>


        </tr>


    </tfoot>


</table>


<h2>表格二</h2>


<table role="table">


    <thead>


        <tr role="row">


            <th role="columnheader">产品</th>


            <th role="columnheader">价格</th>


        </tr>


    </thead>


    <tbody>


        <tr role="row">


            <td role="cell">笔记本电脑</td>


            <td role="cell">$1000</td>


        </tr>


        <tr role="row">


            <td role="cell">手机</td>


            <td role="cell">$500</td>


        </tr>


    </tbody>


    <tfoot>


        <tr role="row">


            <td role="cell" colspan="2">表格二的表尾</td>


        </tr>


    </tfoot>


</table>


</body>


</html>

通过使用ARIA属性，可以使屏幕阅读器更好地解释表格的结构，从而改善网页的无障碍体验。

三、动态生成表格内容

1、使用JavaScript生成表格

在实际开发中，表格内容往往是动态生成的。你可以使用JavaScript来生成和操作表格内容。以下是一个基本示例：

<!DOCTYPE html>


<html>


<head>


    <title>动态生成表格示例</title>


    <style>


        table {


            width: 50%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>动态生成的表格</h2>


<table id="dynamicTable">


    <thead>


        <tr>


            <th>姓名</th>


            <th>年龄</th>


        </tr>


    </thead>


    <tbody>


    </tbody>


</table>


<script>


    var data = [


        {name: "张三", age: 25},


        {name: "李四", age: 30}


    ];


    var table = document.getElementById("dynamicTable").getElementsByTagName('tbody')[0];


    data.forEach(function(item) {


        var newRow = table.insertRow();


        var nameCell = newRow.insertCell(0);


        var ageCell = newRow.insertCell(1);


        nameCell.textContent = item.name;


        ageCell.textContent = item.age;


    });


</script>


</body>


</html>

在这个示例中，我们使用JavaScript动态生成表格内容。这种方法特别适用于数据来自API或数据库的情况。

2、结合AJAX加载数据

在实际项目中，表格数据通常是通过AJAX从服务器端获取的。以下是一个结合AJAX加载数据的示例：

<!DOCTYPE html>


<html>


<head>


    <title>AJAX加载表格示例</title>


    <style>


        table {


            width: 50%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>AJAX加载的表格</h2>


<table id="ajaxTable">


    <thead>


        <tr>


            <th>姓名</th>


            <th>年龄</th>


        </tr>


    </thead>


    <tbody>


    </tbody>


</table>


<script>


    function loadTableData() {


        var xhr = new XMLHttpRequest();


        xhr.open("GET", "https://api.example.com/data", true);


        xhr.onreadystatechange = function() {


            if (xhr.readyState == 4 && xhr.status == 200) {


                var data = JSON.parse(xhr.responseText);


                var table = document.getElementById("ajaxTable").getElementsByTagName('tbody')[0];


                data.forEach(function(item) {


                    var newRow = table.insertRow();


                    var nameCell = newRow.insertCell(0);


                    var ageCell = newRow.insertCell(1);


                    nameCell.textContent = item.name;


                    ageCell.textContent = item.age;


                });


            }


        };


        xhr.send();


    }


    window.onload = loadTableData;


</script>


</body>


</html>

在这个示例中，我们使用AJAX从服务器端获取数据并动态生成表格内容。这种方法可以大大增强页面的动态性和交互性。

四、表格的响应式设计

1、使用CSS媒体查询

为了确保表格在各种设备上都能良好显示，我们可以使用CSS媒体查询来实现响应式设计。例如：

<!DOCTYPE html>


<html>


<head>


    <title>响应式表格示例</title>


    <style>


        table {


            width: 100%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


        @media (max-width: 600px) {


            table, thead, tbody, th, td, tr {


                display: block;


            }


            th, td {


                width: 100%;


                box-sizing: border-box;


            }


            th {


                background-color: #f8f8f8;


            }


        }


    </style>


</head>


<body>


<h2>响应式表格</h2>


<table>


    <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>


</body>


</html>

在这个示例中，我们使用了CSS媒体查询来调整表格在小屏幕设备上的显示方式，从而确保表格在各种设备上都能良好显示。

2、使用JavaScript动态调整表格布局

除了使用CSS媒体查询外，我们还可以使用JavaScript动态调整表格的布局。例如：

<!DOCTYPE html>


<html>


<head>


    <title>动态调整表格布局示例</title>


    <style>


        table {


            width: 100%;


            margin-bottom: 20px;


            border-collapse: collapse;


        }


        th, td {


            padding: 10px;


            text-align: left;


            border: 1px solid #ddd;


        }


        th {


            background-color: #f2f2f2;


        }


    </style>


</head>


<body>


<h2>动态调整表格布局</h2>


<table id="responsiveTable">


    <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>


<script>


    function adjustTableLayout() {


        var table = document.getElementById("responsiveTable");


        var windowWidth = window.innerWidth;


        if (windowWidth <= 600) {


            table.classList.add("mobile");


        } else {


            table.classList.remove("mobile");


        }


    }


    window.onload = adjustTableLayout;


    window.onresize = adjustTableLayout;


</script>


<style>


    .mobile th, .mobile td {


        display: block;


        width: 100%;


        box-sizing: border-box;


    }


    .mobile th {


        background-color: #f8f8f8;


    }


</style>


</body>


</html>

在这个示例中，我们使用JavaScript动态检测窗口宽度，并根据窗口宽度调整表格的布局。这种方法可以提供更加灵活和动态的响应式设计。

五、结合框架和库

1、使用Bootstrap表格

Bootstrap是一个非常流行的前端框架，提供了丰富的组件和样式，包括表格。使用Bootstrap可以大大简化表格的设计和响应式布局。例如：

<!DOCTYPE html>


<html>


<head>


    <title>Bootstrap表格示例</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


</head>


<body>


<div class="container">


    <h2>Bootstrap表格</h2>


    <table class="table table-striped table-bordered">


        <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>


</div>


</body>


</html>

在这个示例中，我们使用了Bootstrap提供的表格样式，使表格更加美观和响应式。

2、使用DataTables插件

DataTables是一个非常强大的jQuery插件，用于增强HTML表格的功能，包括排序、搜索和分页。例如：

<!DOCTYPE html>


<html>


<head>


    <title>DataTables示例</title>


    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">


    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>


    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>


</head>


<body>


<div class="container">


    <h2>DataTables表格</h2>


    <table id="example" class="display" style="width:100%">


        <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>


</div>


<script>


$(document).ready(function() {


    $('#example').DataTable();


} );


</script

相关问答FAQs：

1. 为什么我在网页上添加了两个表格，但只能显示一个表格？

可能是因为您在添加第二个表格时没有正确设置表格的位置和样式。请确保两个表格具有不同的id或class，并使用适当的HTML和CSS来布局和显示它们。

2. 我该如何在网页上同时显示两个表格？

要在网页上同时显示两个表格，您可以使用HTML和JavaScript来创建和控制表格。首先，确保每个表格都有唯一的id或class。然后，使用CSS来设置表格的样式和布局。最后，使用JavaScript来选择并操作表格元素，例如通过添加、删除或修改表格行来更新数据。

3. 我想在一个页面上显示两个表格，但它们的样式和布局应该不同。该怎么办？

如果您希望两个表格在样式和布局上有所不同，可以为每个表格使用不同的CSS类或id，并分别为它们设置不同的样式。您可以通过在HTML中为每个表格元素指定相应的类或id，并在CSS中使用这些类或id来定义样式和布局。这样，您就可以根据需要为每个表格定制独特的样式和布局。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2406016

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部