使用HTML添加表格1（基本元素）-零基礎自學網頁制作

格元素詳解與練習

提到表格，大家最先想到的就是EXCEL這款軟件，實際上在對表格的操作上，HTML與EXCEL非常相似。

在展示數據，統計數據方面，表格比文字描述更具表達優勢，在網頁中，表格也經常被用來展示數據、計劃日常安排等內容。如圖所示：

今天我們就來學習一下如何向頁面中添加表格元素。

首先來介紹一下表格元素中的基本標簽。

NO.1：<table></table>

這個標簽是書寫表格的第一個標簽，它本身在頁面上看不出什么內容，但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭，結尾標簽寫在表格元素的結尾。

NO.2：<caption></caption>

這個標簽是表格的標題標簽。

NO.3：<tr></tr>

這個標簽定義表格的列標簽。

NO.4：<th></th>

這個標簽是列表標題標簽，例如，男生、女士、姓名等。

NO.5：<td></td>

這個標簽定義表格的行標簽。

OK，這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下：

頁面效果如圖所示：沒有表格的外邊框。

如何添加外邊框呢？在<table>標簽中修改border屬性即可，示例代碼如下：border="1"是給表格添加寬為1的邊界線。

<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->

效果如圖所示：

這時，您會發現表格在頁面上的尺寸非常小，可不可以按照頁面尺寸來顯示表格嗎？當然可以，這就需要為<table>標簽修改第二個屬性width，示例代碼如圖所示：width = "100%"指的是表格寬度與平面寬度一致。

<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->

效果如圖所示：

ok！今天的講解先到這里，明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽，以及合并單元格操作。

今天的完整代碼示例如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body><h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
  <caption>表格標題</caption>
<tr>
  <th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body> 
</html>

正所謂萬丈高樓平地起，html技術雖然簡單，但是內容相對繁瑣，也是以后進一步學習網頁制作的基礎，希望大家動手寫每一段代碼，把每一步踩堅實。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

紹

我們都知道普通的HTML自帶的功能相對有限，很多復雜的交互式場景，如果手動去寫功能的話會非常的復雜，而且可擴展性差，就拿HTML表格來說，對于初學者或者對于復雜的拖拽式交互編程不熟悉的話會很浪費時間，因此今天就介紹一個第三方的插件——Table-draagger，來輕松實現類似的功能。Table-draagger是用于構建可重排序的拖放表的極簡主義純Javascript庫！

Github

https://github.com/sindu12jun/table-dragger

特征

Table-draagger因為其以下幾個特征而讓拖拽和排序的實現變得如此簡單：

非常容易配置
能夠同時對列或行進行排序
排序時動畫流暢
沒有臃腫的依賴
提供觸摸事件（意味著在觸摸設備可以實現一些你想要的功能）

安裝使用

安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>

或者嘗試開發中的不穩定版本

npm install table-dragger@next --save

快速入門

請看以下代碼：

import tableDragger from 'table-dragger'
tableDragger(el, options?)

<table id="table">
<thead>
<tr>
<th class='handle'>header1</th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
</tbody>
</table>

var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'row',
dragHandler: '.handle',
onlyBody: true,
});
dragger.on('drop',function(from, to){
console(from);
console(to);
});

你可以在不設置任何參數的情況下使用默認的拖拽和排序方式，當然以下是你可以配置的選項：

options.mode

1、將mode設置為column，用戶拖動和排序表的列

2、將mode設置為row，用戶拖動并排序表的行

3、設置mode為free，用戶根據點擊后鼠標移動的方向拖動行或列。注意，必須在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖動句柄選擇器默認情況下，在列模式下，dragHandler是表的第一行；在行模式下，則是第一列。

options.onlyBody

在行模式下將onlyBody設置為true時，用戶只能在tbody中提升行。

下面是返回對象的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
.on('drag', () => {
console.log('drag');
})
.on('drop', (from, to, el, mode) => {
console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('shadowMove', (from, to, el, mode) => {
console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
})
.on('out', (el, mode) => {
console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
});

總結

Table-draagger為我們節省了很多手動封裝表格排序和拖拽功能的時間，當然目前很多第三方框架已經實現了類似的功能，這更適用于原生的html表格，你還可以通過一些手段記憶用戶拖拽，這只是其中一種思路，Enjoy it！~

數據密集型文檔和網頁中，復雜表格結構是必不可少的。它們幫助用戶理解大量的信息和數據關系。本文將詳細介紹復雜表格的設計要點，提供實用的例子，并展示如何使用HTML代碼來創建這些表格。

復雜表格的設計要點

1. 清晰的層次結構

復雜表格應該有明確的層次結構，以便用戶可以輕松地從總體到細節地閱讀信息。這通常通過使用標題行和列來實現。

2. 一致的對齊

數據應該根據其類型進行對齊，例如，數字通常右對齊以便于比較，而文本則左對齊。

3. 合理的分隔

使用邊框和底色來區分不同的行和列，以增強可讀性。

4. 簡潔的標注

對于包含復雜數據的表格，應該提供清晰的標注和腳注，以便用戶理解數據的來源和含義。

表格實例與HTML代碼

實例 1: 帶有合并單元格的表格

這個表格顯示了一個團隊成員在上半年和下半年的表現評估。

<table border="1">
  <thead>
    <tr>
      <th rowspan="2">成員</th>
      <th colspan="2">上半年</th>
      <th colspan="2">下半年</th>
    </tr>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
      <th>項目1</th>
      <th>項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>良好</td>
      <td>優秀</td>
      <td>優秀</td>
      <td>良好</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>合格</td>
      <td>良好</td>
      <td>良好</td>
      <td>優秀</td>
    </tr>
  </tbody>
</table>

實例 2: 帶有子標題的復雜表格

這個表格顯示了一個公司季度財務報告的簡化版本。

<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Q1</th>
      <th></th>
      <th>Q2</th>
      <th></th>
      <th>Q3</th>
      <th></th>
      <th>Q4</th>
      <th></th>
    </tr>
    <tr>
      <th>財務報告</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
      <th>收入</th>
      <th>支出</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020年</td>
      <td>50</td>
      <td>30</td>
      <td>70</td>
      <td>40</td>
      <td>60</td>
      <td>50</td>
      <td>80</td>
      <td>60</td>
    </tr>
    <tr>
      <td>2021年</td>
      <td>55</td>
      <td>35</td>
      <td>75</td>
      <td>45</td>
      <td>65</td>
      <td>55</td>
      <td>85</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

實例 3: 具有行跨度的表格

這個表格展示了不同設備對于特定功能的支持程度。

<table border="1">
  <thead>
    <tr>
      <th>功能</th>
      <th>支持的設備</th>
      <th>兼容性</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">視頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>高</td>
    </tr>
    <tr>
      <td>電腦</td>
      <td>中</td>
    </tr>
    <tr>
      <td rowspan="2">音頻播放</td>
      <td>手機</td>
      <td>高</td>
    </tr>
    <tr>
      <td>智能音箱</td>
      <td>高</td>
    </tr>
    <tr>
      <td rowspan="2">文檔編輯</td>
      <td>電腦</td>
      <td>高</td>
    </tr>
    <tr>
      <td>平板</td>
      <td>中</td>
    </tr>
  </tbody>
</table>

最佳實踐

簡化設計：避免使用過多的裝飾性元素，如陰影或漸變。
數據可比性：確保相似性質的數據在表格中是可比較的。
注釋和說明：在表格下方提供必要的注釋和數據來源說明。
測試：在不同的設備和屏幕尺寸上測試表格的顯示效果。

復雜表格結構是展示和理解多維數據的強大工具。通過遵循上述設計原則和實例，你可以創建清晰、有效的表格來提高你的數據呈現能力。

在線咨詢

上一篇：H5游戲,專業H5游戲開發,H5小游戲定制,休閑H5游戲
下一篇：最全11種方法 css隱藏頁面元素思路不一樣，不一定要隱藏

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商