亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML 表格詳解（簡單易懂較詳細）

  發(fā)布時間：2025-03-12 09:36:30   作者：宇寒風暖   我要評論
HTML表格用于在網頁上展示數據,通過標簽及其相關標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格的創(chuàng)建方法、常用標簽和屬性,以及如何通過CSS美化表格，感興趣的朋友一起看看吧

HTML 表格用于在網頁上展示數據，通過 <table> 標簽及其相關標簽來創(chuàng)建。表格由行和列組成，每一行包含一個或多個單元格，單元格可以包含文本、圖像、鏈接等元素。本文將詳細介紹 HTML 表格的創(chuàng)建方法、常用標簽和屬性，以及如何通過 CSS 美化表格。

一、HTML 表格的基本結構

一個簡單的 HTML 表格由以下標簽組成：

<table>
  <tr>
    <th>表頭 1</th>
    <th>表頭 2</th>
  </tr>
  <tr>
    <td>數據 1</td>
    <td>數據 2</td>
  </tr>
  <tr>
    <td>數據 3</td>
    <td>數據 4</td>
  </tr>
</table>
  • <table>：定義表格的開始和結束。
  • <tr>：定義表格中的一行。
  • <th>：定義表格的表頭單元格，通常用于第一行，表示列的標題。
  • <td>：定義表格中的數據單元格，用于存放具體的數據。

二、HTML 表格的常用屬性

1. border

border 屬性用于設置表格的邊框。默認情況下，表格沒有邊框。

<table border="1">
  <!-- 表格內容 -->
</table>

2. cellpadding

cellpadding 屬性用于設置單元格內容與單元格邊框之間的距離。

<table border="1" cellpadding="5">
  <!-- 表格內容 -->
</table>

3. cellspacing

cellspacing 屬性用于設置單元格之間的間距。

<table border="1" cellpadding="5" cellspacing="0">
  <!-- 表格內容 -->
</table>

4. width 和 height

width 和 height 屬性用于設置表格的寬度和高度。這些屬性可以以像素或百分比為單位設置。

<table border="1" width="500" height="200">
  <!-- 表格內容 -->
</table>

三、HTML 表格的高級用法

1. 合并單元格

(1) colspan

colspan 屬性用于合并水平方向上的單元格。

<table border="1">
  <tr>
    <th colspan="2">表頭 1 和 2 合并</th>
  </tr>
  <tr>
    <td>數據 1</td>
    <td>數據 2</td>
  </tr>
</table>

(2) rowspan

rowspan 屬性用于合并垂直方向上的單元格。

<table border="1">
  <tr>
    <th rowspan="2">表頭 1</th>
    <td>數據 1</td>
  </tr>
  <tr>
    <td>數據 2</td>
  </tr>
</table>

2. 表格的頭部、主體和腳部

(1) <thead>

<thead> 標簽用于定義表格的頭部，通常包含表頭單元格。

<table border="1">
  <thead>
    <tr>
      <th>表頭 1</th>
      <th>表頭 2</th>
    </tr>
  </thead>
  <!-- 表格主體 -->
</table>

(2) <tbody>

<tbody> 標簽用于定義表格的主體，包含數據單元格。

<table border="1">
  <thead>
    <tr>
      <th>表頭 1</th>
      <th>表頭 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據 1</td>
      <td>數據 2</td>
    </tr>
    <tr>
      <td>數據 3</td>
      <td>數據 4</td>
    </tr>
  </tbody>
</table>

(3) <tfoot>

<tfoot> 標簽用于定義表格的腳部，通常用于總結或總計行。

<table border="1">
  <thead>
    <tr>
      <th>表頭 1</th>
      <th>表頭 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據 1</td>
      <td>數據 2</td>
    </tr>
    <tr>
      <td>數據 3</td>
      <td>數據 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>總計</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

3. 表格的樣式設計

(1) 使用內聯(lián)樣式

<table border="1" style="border-collapse: collapse; width: 500px;">
  <tr>
    <th style="background-color: #f2f2f2; padding: 8px;">表頭 1</th>
    <th style="background-color: #f2f2f2; padding: 8px;">表頭 2</th>
  </tr>
  <tr>
    <td style="padding: 8px; text-align: center;">數據 1</td>
    <td style="padding: 8px; text-align: center;">數據 2</td>
  </tr>
  <tr>
    <td style="padding: 8px; text-align: center;">數據 3</td>
    <td style="padding: 8px; text-align: center;">數據 4</td>
  </tr>
</table>

(2) 使用內部樣式表

<style>
  table {
    border-collapse: collapse;
    width: 500px;
  }
  th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>
<table>
  <tr>
    <th>表頭 1</th>
    <th>表頭 2</th>
  </tr>
  <tr>
    <td>數據 1</td>
    <td>數據 2</td>
  </tr>
  <tr>
    <td>數據 3</td>
    <td>數據 4</td>
  </tr>
</table>

(3) 使用外部樣式表

<!-- 在 HTML 文件中 -->
<link rel="stylesheet" type="text/css" href="styles.css">
<table class="custom-table">
  <tr>
    <th>表頭 1</th>
    <th>表頭 2</th>
  </tr>
  <tr>
    <td>數據 1</td>
    <td>數據 2</td>
  </tr>
  <tr>
    <td>數據 3</td>
    <td>數據 4</td>
  </tr>
</table>
/* 在 styles.css 文件中 */
.custom-table {
  border-collapse: collapse;
  width: 500px;
}
.custom-table th, .custom-table td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}
.custom-table th {
  background-color: #f2f2f2;
}
.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

4. 響應式表格

在移動設備上，表格可能會超出屏幕寬度，影響用戶體驗。通過 CSS，可以實現響應式表格，使其在小屏幕上也能良好顯示。

<style>
  .responsive-table {
    width: 100%;
    overflow-x: auto;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>
<div class="responsive-table">
  <table>
    <tr>
      <th>表頭 1</th>
      <th>表頭 2</th>
      <th>表頭 3</th>
      <th>表頭 4</th>
    </tr>
    <tr>
      <td>數據 1</td>
      <td>數據 2</td>
      <td>數據 3</td>
      <td>數據 4</td>
    </tr>
    <tr>
      <td>數據 5</td>
      <td>數據 6</td>
      <td>數據 7</td>
      <td>數據 8</td>
    </tr>
  </table>
</div>

四、HTML 表格的完整示例

以下是一個包含多種用法的完整 HTML 表格示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表格示例</title>
    <style>
        .custom-table {
            border-collapse: collapse;
            width: 100%;
        }
        .custom-table th, .custom-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .custom-table th {
            background-color: #4CAF50;
            color: white;
        }
        .custom-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .custom-table tr:hover {
            background-color: #f1f1f1;
        }
        .responsive-table {
            width: 100%;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>HTML 表格示例</h1>
    <!-- 基本表格 -->
    <h2>基本表格</h2>
    <table border="1">
        <tr>
            <th>表頭 1</th>
            <th>表頭 2</th>
        </tr>
        <tr>
            <td>數據 1</td>
            <td>數據 2</td>
        </tr>
        <tr>
            <td>數據 3</td>
            <td>數據 4</td>
        </tr>
    </table>
    <!-- 合并單元格 -->
    <h2>合并單元格</h2>
    <table border="1">
        <tr>
            <th colspan="2">表頭 1 和 2 合并</th>
        </tr>
        <tr>
            <td>數據 1</td>
            <td>數據 2</td>
        </tr>
        <tr>
            <td>數據 3</td>
            <td>數據 4</td>
        </tr>
    </table>
    <!-- 表格的頭部、主體和腳部 -->
    <h2>表格的頭部、主體和腳部</h2>
    <table border="1">
        <thead>
            <tr>
                <th>表頭 1</th>
                <th>表頭 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>數據 1</td>
                <td>數據 2</td>
            </tr>
            <tr>
                <td>數據 3</td>
                <td>數據 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>總計</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>
    <!-- 響應式表格 -->
    <h2>響應式表格</h2>
    <div class="responsive-table">
        <table class="custom-table">
            <thead>
                <tr>
                    <th>表頭 1</th>
                    <th>表頭 2</th>
                    <th>表頭 3</th>
                    <th>表頭 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>數據 1</td>
                    <td>數據 2</td>
                    <td>數據 3</td>
                    <td>數據 4</td>
                </tr>
                <tr>
                    <td>數據 5</td>
                    <td>數據 6</td>
                    <td>數據 7</td>
                    <td>數據 8</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

五、總結

HTML 表格是網頁中展示數據的重要工具。通過 <table>、<tr>、<th>、<td> 等標簽，可以創(chuàng)建結構清晰、樣式美觀的表格。以下是對 HTML 表格相關標簽和屬性的總結：

table>標簽名描述示例<table>定義表格<table><tr>定義表格中的一行<tr><th>定義表格的表頭單元格<th><td>定義表格中的數據單元格<td><thead>定義表格的頭部<thead><tbody>定義表格的主體<tbody><tfoot>定義表格的腳部<tfoot>

屬性名描述示例
border設置表格的邊框<table border="1">
cellpadding設置單元格內容與邊框之間的距離<table cellpadding="5">
cellspacing設置單元格之間的間距<table cellspacing="0">
width設置表格的寬度<table width="500">
height設置表格的高度<table height="200">
colspan合并水平方向上的單元格<th colspan="2">
rowspan合并垂直方向上的單元格<th rowspan="2">

通過合理使用這些標簽和屬性，可以創(chuàng)建出結構清晰、樣式美觀的 HTML 表格，滿足各種數據展示的需求。

到此這篇關于HTML 表格詳解（簡單易懂較詳細）的文章就介紹到這了,更多相關html表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • html table+css實現可編輯表格的示例代碼

    本文主要介紹了html table+css實現可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習
    2024-03-06

  • HTML表格合并的具體實現方式

    表格是日常常用的工具，很多時候需要用到單元合并，本文主要介紹了HTML表格合并的具體實現方式， 具有一定的參考價值，感興趣的可以了解一下
    2023-01-05

  • HTML中的表格元素介紹

    這篇文章介紹了HTML中的表格元素，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-02-26

  • HTML中table表格拆分合并(colspan、rowspan)

    這篇文章主要介紹了HTML中table表格拆分合并(colspan、rowspan),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2021-04-07

  • HTML表格跨行跨列操作(rowspan、colspan)

    這篇文章主要介紹了HTML表格跨行跨列操作(rowspan、colspan)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-12-08

  • 詳解HTML表格

    這篇文章主要介紹了HTML表格,包括表格的作用布局及格式問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-07-31

  • html中table固定頭部表格tbody可上下左右滑動

    這篇文章主要介紹了html中table固定頭部表格tbody可上下左右滑動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小
    2020-07-30

  • 詳解html中表格table的行列合并問題解決

    這篇文章主要介紹了詳解html中表格table的行列合并問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-07-28

  • HTML頁面自適應寬度的table(表格)

    這篇文章主要介紹了HTML頁面自適應寬度的table(表格),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2020-06-16

  • html做表格只顯示表格的外邊框

    這篇文章主要介紹了html做表格只顯示表格的外邊框，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-20

最新評論