CSS - 表格樣式

上一頁
下一頁

在網頁中設定表格樣式涉及使用 CSS 屬性來自定義表格的外觀。CSS 屬性（如 border-collapse、border-spacing 和 caption-side）可以應用於表格，以控制表格及其單元格的邊框、間距和對齊方式。

本章討論如何使用 CSS 設定 HTML 表格的不同屬性。

目錄


 

CSS 表格邊框樣式

在 CSS 中，有幾個邊框屬性可以應用於表格

  • border：此屬性設定表格邊框四邊的寬度、樣式和顏色（例如，border: 1px solid black;）。
  • border-radius：此屬性使表格邊框的角變圓（例如，border-radius: 5px|50%）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: separate;
            border-radius: 10px;
            border-style: inset;
            border-color: blue;
            width: 100%;
        }
        td {
            border: 2px dashed;
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
    </table>
</body>

</html>

CSS 表格邊框摺疊

屬性 border-collapse 確保表格單元格之間的邊框摺疊成單個邊框，從而建立更簡潔的外觀。屬性 border-collapse 可以具有值 collapse 或 separate（預設值）。

以下示例顯示了 collapse 和 separate 值的區別。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 3px solid purple;
        }
        th, td {
            border: 1px solid black;
            padding: 6px;
        }
    </style>
</head>

<body>
    <h2> border-collapse: separate </h2>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>

    <h2> border-collapse: collapse </h2>
    <table style="border-collapse: collapse;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>

    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> Data 3</td>
    </tr>

    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> Data 3</td>
    </tr>
</table>
</body>
</html>

CSS 表格邊框間距

border-spacing 屬性指定分隔表格中相鄰單元格邊框的距離。此屬性可以指定為一個或兩個值。

  • border-spacing: 2px;：在這種情況下，2px 間距應用於垂直和水平邊框。
  • border-spacing: 1cm 2em;：在這種情況下，第一個值定義單元格之間的水平間距（即相鄰列中單元格之間的空間），第二個值定義單元格之間的垂直間距（即相鄰行中單元格之間的空間）。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: separate;
            border-spacing: 1em 0.5em;
            border: 3px solid;
        }
        td {
            width: 1.5em;
            height: 1.5em;
            border: 1px solid black;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>

</html>

注意：border-spacing 屬性僅在 border-collapse 設定為 separate 時有效。如果將 border-collapse 設定為 collapse，則 border-spacing 屬性將不起作用，邊框將摺疊成一條線。

CSS 表格標題位置

CSS 中的 caption-side 屬性用於控制表格標題相對於表格的位置。它可以具有 top、bottom、block-start 等值。讓我們看一個例子

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .top caption {
            caption-side: top;
        }
        .bottom caption {
            caption-side: bottom;
        }
        table {
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <table class="top">
        <caption>
            Caption ABOVE the table
        </caption>
        
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
    <br />

    <table class="bottom">
        <caption>
            Caption BELOW the table
        </caption>

        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>
</html>

CSS 表格空單元格

CSS 中的 empty-cells 屬性用於控制表格中沒有內容或被認為是“空”的單元格的呈現方式。它僅適用於表格和表格單元格。

  • empty-cells: show：它表示應顯示空單元格，並帶有邊框和間距，就好像它們包含內容一樣。它是預設值。
  • empty-cells: hide：它表示應隱藏空單元格，並且不佔用任何空間。空單元格的邊框和間距將不會顯示，有助於建立更緊湊的佈局。
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 350px;
            border-collapse: separate;
            empty-cells: show;
        }
        td,th {
            padding: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: #999999;
        }
    </style>
</head>

<body>
    <h2> Empty Cells: Show </h2>    
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> </td>
        </tr>
    </table>

    <h2> Empty Cells: Hide </h2>    
    <table style="empty-cells: hide;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> </td>
    </tr>
</table>
</body>
</html>

CSS 表格佈局

table-layout 屬性用於控制瀏覽器如何呈現表格。此屬性可以具有以下值之一

  • table-layout: auto：在這種情況下，瀏覽器將根據單元格的內容計算列和單元格的寬度。
  • table-layout: fixed：在這種情況下，瀏覽器將根據表格的第一行分配固定寬度給每個列。這意味著所有後續行都將遵循相同的列寬，而不管其內容如何。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>Table with fixed layout</h2>
    <table style="table-layout: fixed; ">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
        </tr>

        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
    </table>

    <h2>Table with auto layout</h2>
    <table style="table-layout: auto; ">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td>This is some longer content in Column 1</td>
            <td>Short content</td>
            <td>Even longer content that might wrap in Column 3</td>
        </tr>

        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
    </table>
</body>
</html>

注意：使用 table-layout: fixed 在您希望建立具有始終一致的列寬的表格時非常有用，尤其是在處理大量資料或希望保持特定設計時。

CSS 表格內容對齊

text-align 和 vertical-align 屬性可用於對齊表格單元格的內容。

  • text-align 屬性設定表格單元格內文字內容的水平對齊方式。它可以具有 left、right、center 和 justify 等值。
  • vertical-align 屬性設定表格單元格內內容的垂直對齊方式。它可以具有 top、bottom、middle 等值。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        table, td, th {
            border: 2px solid black;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 100px;
            height: 70px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td style="text-align: center;">Data Center</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td style="vertical-align: bottom">Data Bottom</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td style="vertical-align: top">Data Top</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
    </table>

    </body>
</html>

注意：預設情況下，<th> 元素的內容是居中對齊的，<td 元素的內容是左對齊的。預設情況下，<th> 和 <td 元素內容的垂直對齊方式為中間。

CSS 表格背景顏色

可以使用 background-color 屬性設定表格的背景顏色。

/* To set the background color of table */
table {
    background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
    background-color: #f2f2f2;
}
tr {
     background-color: #ffffff;
}

要設定整個表格的背景顏色，請使用 table 選擇器。要設定單個單元格或行的背景顏色，請分別使用 td 或 tr 選擇器。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 2px solid black;
            background-color: rgb(237, 181, 237);
            width: 100%;
            border-collapse: collapse;
        }
        td {
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
   <h2>Background color property</h2>
   <table>
        <tr>
            <th>Header 1</th>
            <th style="background-color: #f0f0f0">Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
        
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td style="background-color: #04af2f;">Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
   </table>
</body>
</html>

CSS 表格文字字型樣式

可以使用與字型相關的屬性（例如，font-size、font-family、font-weight 等）在 <th> 和 <td 元素上設定表格內容的字型樣式。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        table.one {
            border-collapse: collapse;
            width: 400px;
        }
        th {
            font-size: large;
            font-family: 'Lucida Sans', sans-serif;
        }
        td {
            font-size: small;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
    </style>
</head>

<body>
    <h2>font styles</h2>
    <div>
        <table class = "one" border = "1">
            <th>Heading</th>
            <tr>
                <td> Cell value</td>
            </tr>
            <tr>
                <td> Cell value</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS 表格分隔線

表格中的分隔線用於分隔表格內容並使其更易於閱讀。您可以使用 border 屬性向表格及其單元格新增水平和垂直分隔線。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 2px solid black;
            background-color: rgb(200, 240, 210);
            border-collapse: collapse;
            width: 100%;
        }
        th {
            border-bottom: 2px solid black;
            padding: 5px;
        }
        td{
            border-bottom: 1px solid grey;   
            padding: 5px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>Horizontal Divider</h2>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>
</html>

CSS 條紋表格

條紋表格是指具有交替行背景顏色的表格，這使得更容易閱讀和理解資料。您可以使用 CSS 建立條紋表格，方法是使用 nth-child 選擇器為奇數行和偶數行應用不同的背景顏色。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
   <h2>Striped table</h2>
   <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
   </table>
</body>

</html>

CSS 響應式表格

響應式表格是指根據不同的螢幕尺寸和解析度調整和適應其佈局和格式的表格。它確保表格在各種螢幕尺寸上易於閱讀和訪問。當螢幕較小且無法看到所有內容時，您可以使用屬性 overflow: auto 向表格新增水平捲軸。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .responsive-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }

        .responsive-table th, .responsive-table td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
        }

        .responsive-table th {
            background-color: #f2f2f2;
        }

        .responsive-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
    <h2>Responsive Table</h2>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>

            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
            </tr>

            <tr>
                <td>Data 9</td>
                <td>Data 10</td>
                <td>Data 11</td>
                <td>Data 12</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
列印頁面
上一頁
下一頁
廣告