HTML Table 分成12等分|极客教程

HTML Table 分成12等分

在网页设计中，经常会遇到需要将一个表格分成多个等分的情况，这种情况下，我们可以使用HTML表格来实现。在本文中，我们将介绍如何使用HTML表格将一个表格分成12等分，并提供详细的示例代码。

创建一个12等分的HTML表格

首先，我们需要创建一个包含12列的HTML表格，每列的宽度相等，以实现将表格分成12等分的效果。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>12 Equal Columns Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML Table 分成12等分

在上面的示例代码中，我们创建了一个包含12列的表格，每列的宽度相等，并且使用了CSS样式来设置表格的边框。

使用CSS实现等分效果

为了实现将表格分成12等分的效果，我们可以使用CSS的width属性来设置每列的宽度为8.33%，这样每列的宽度将会相等，并且占据整个表格的宽度。下面是修改后的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>12 Equal Columns Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            width: 8.33%;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
            <td>Column 6</td>
            <td>Column 7</td>
            <td>Column 8</td>
            <td>Column 9</td>
            <td>Column 10</td>
            <td>Column 11</td>
            <td>Column 12</td>
        </tr>
    </table>
</body>
</html>

Output:

HTML Table 分成12等分

在上面的示例代码中，我们使用了CSS的width: 8.33%来设置每列的宽度，这样每列的宽度将会相等，并且占据整个表格的宽度。

使用JavaScript动态生成表格

除了静态创建表格外，我们还可以使用JavaScript动态生成表格，以实现更灵活的布局效果。下面是一个使用JavaScript动态生成12等分表格的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic 12 Equal Columns Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            width: 8.33%;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <tr></tr>
    </table>

    <script>
        var table = document.getElementById("myTable");
        var row = table.insertRow(0);

        for (var i = 1; i <= 12; i++) {
            var cell = row.insertCell(i - 1);
            cell.innerHTML = "Column " + i;
        }
    </script>
</body>
</html>

Output:

HTML Table 分成12等分

在上面的示例代码中，我们使用JavaScript动态生成了一个包含12列的表格，并设置每列的宽度为8.33%，实现了将表格分成12等分的效果。

使用Bootstrap实现响应式布局

如果需要实现响应式布局，我们可以使用Bootstrap框架来快速搭建网页。下面是一个使用Bootstrap实现12等分表格的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 12 Equal Columns Table</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">Column 1</div>
            <div class="col">Column 2</div>
            <div class="col">Column 3</div>
            <div class="col">Column 4</div>
            <div class="col">Column 5</div>
            <div class="col">Column 6</div>
            <div class="col">Column 7</div>
            <div class="col">Column 8</div>
            <div class="col">Column 9</div>
            <div class="col">Column 10</div>
            <div class="col">Column 11</div>
            <div class="col">Column 12</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Output:

HTML Table 分成12等分