12.HTML創建和格式化表格

格是組織和顯示數據的一種有效方式，無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格，并提供一些實例。

創建表格

在Word或類似文檔編輯器中創建表格

插入表格：打開文檔編輯器，例如Microsoft Word，找到“插入”選項卡，點擊“表格”，選擇需要的行數和列數。
輸入數據：點擊表格中的單元格，開始輸入數據。可以使用Tab鍵在單元格之間跳轉。
調整行列：根據需要調整行高和列寬。在Word中，可以通過拖動表格邊框來調整，或者點擊右鍵選擇“表格屬性”進行精確設置。

在HTML中創建表格

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

<table> 標簽用于創建表格。
<tr> 標簽定義表格中的行。
<th> 標簽定義表頭單元格，通常加粗居中顯示。
<td> 標簽定義標準單元格。

格式化表格

格式化表格包括調整表格的樣式、布局和顏色等，以提高其可讀性和美觀性。

文檔編輯器中的格式化

邊框樣式：可以為表格或單個單元格設置邊框樣式、顏色和寬度。在Word中，選擇表格，然后在“設計”選項卡中選擇邊框樣式。
單元格填充：為了區分不同的行或列，可以對單元格進行顏色填充。在Word中，選擇單元格或行列，然后在“布局”選項卡中選擇“填充”。
文本對齊：文本對齊方式可以設置為左對齊、居中或右對齊。選擇單元格后，在“布局”選項卡中選擇對齊方式。
合并單元格：有時需要將多個單元格合并為一個單元格以顯示標題或其他信息。選擇要合并的單元格，然后點擊“合并單元格”。

HTML中的格式化

在HTML中，格式化通常通過CSS完成。

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

border-collapse 設置為 collapse 以消除單元格之間的間隙。
th, td 設置了邊框、填充和文本對齊。
th 設置了表頭的背景色。
tr:nth-child(even) 為偶數行設置了條紋效果。

實例

文檔編輯器實例

假設我們需要創建一個3x3的表格，顯示一個小型團隊的成員信息。

插入一個3行3列的表格。
輸入數據：姓名、職位、郵箱。
設置第一行為表頭，加粗并填充淡藍色背景。
設置所有單元格的文本為居中對齊。
為表格添加外邊框，并為行添加細邊框。

HTML實例

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Developer</td>
    <td>bob@example.com</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>Designer</td>
    <td>charlie@example.com</td>
  </tr>
</table>

</body>
</html>

在這個HTML實例中，我們創建了一個帶有條紋效果的表格，表頭有綠色背景和白色文字，每個單元格都有適當的填充和邊框。

結論

創建和格式化表格是一項基本技能，無論是在文檔編輯器還是HTML中。一個良好格式化的表格不僅能有效傳達信息，還能提升整體文檔或網頁的美觀性和專業性。通過實踐這些技巧和使用示例作為參考，你可以創建出既實用又吸引人的表格。

Excel中給表格進行顏色填充，不僅凸顯出表格的重要性，而且在一定程度上美化了表格，今天在小編的帶領下，大家可以一起去看看如何把表格的填充背景設置為中心輻射類型的，這樣的填充背景相對于普通的背景而言，更能夠引起人們的吸引力。

軟件版本：
軟件大小：
軟件授權：
適用平臺：
http://dl.pconline.com.cn/download/121649.html

操作步驟

1、首先打開一份原始的工作表，選中整個表格所在的單元格，單擊“開始”選項卡，在“單元格”區域單擊“格式”選項組，然后在彈出的下拉菜單中選擇“設置單元格格式”命令;

2、在彈出的對話框中單擊“填充”選項卡，然后在中間區域單擊“填充效果”選項;

3、在“填充效果”的對話框中單擊“雙色”按鈕;然后在其旁邊的“顏色一”和“顏色二”中分別選擇兩種不同的顏色，小編在這里將顏色一設置為紅色，顏色二為黃色，之后單擊“中心輻射”按鈕，一切準備就緒后單擊“確定”按鈕;

4、此時系統會自動的返回到“設置單元格格式”對話框中，我們將其“關閉”即可;

5、最后回到工作薄中我們一起開看下設置后的效果吧：

中心輻射效果圖

提示：中心輻射的背景可以很快的引起讀者的吸引力，并且用戶還可以自己設置顏色哦。

伙伴們，好幾天不見了，這一周菜鳥小白工作很忙，所以沒有每天更新學習內容，但是菜鳥小白的學習是沒有停下來的，只是沒有時間來整理學習筆記了。現在就將菜鳥小白這兩天學習的HTML基礎和大家分享，其中還會拿一些標簽進行舉例，顯示效果。

HTML概述

HTML語言是一種標簽語言，它不需要編譯，可以直接由瀏覽器執行。在標準網頁設計中HTML負責填充網頁的內容，HTML編寫的超文本文檔（文件）稱之為HTML文檔（網頁），它包含了一些html元素，使用html或者htm為文件名后綴，能獨立于各種操作系統平臺，如Unix、Windows等

HTML文檔結構

標準的html文檔是由標簽和要顯示在網頁上的內容組成。HTML用于描述功能的符號成為“標簽”，如<html>、<body>、<table>等。HTML標簽規定HTML文檔的邏輯結構，并且控制文檔的顯示格式，然后由瀏覽器來負責解釋并顯示頁面。通過使用標簽可以區分文本文件的各個組成部分，對頁面上的文字、表格、圖片等多媒體數據所出現的位置、形式、順序及網頁間的超鏈接關系進行設定。

HTML標簽

標簽都是封裝在一對尖括號“<……>”之中。標簽只改變網頁的顯示方式，本身不會顯示在窗口中。HTML文檔中最先出現的標簽是<html>標簽。<html>標簽是文檔標識符，它是成對出現的，首標簽<html>和尾標簽</html>分別位于文檔的最前面和最后面，明確地表示文檔是以超文本標識語言（HTML）編寫的。該標簽不帶任何屬性

<html>……</html>之間有如下標簽：

頭部標簽<head>……</head>

head是英文“頭”的意思。習慣上用戶把HTML文檔分為文檔頭和文檔主體兩部分。文檔主體部分就是在web瀏覽器窗口的用戶區內看到的內容，而文檔頭部分用來規定該文檔的標題（出現在web瀏覽器窗口的標題欄中）和文檔的一些屬性。<head>標簽對的作用就是控制文檔的頭部信息。中間可以使用<title>……</title>、<script>……</script>標簽對，在此標簽中間可以HTML文檔的標簽是可以嵌套的，即在一對標簽中可以嵌入另外一對子標簽，用來規定母標簽所含范圍的屬性或其中某一部分內容，嵌套在<head>……</head>標簽對中使用的主要有<title>標簽

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
菜鳥小白的學習分享
</head>
</html>

保存為HTML文件后顯示如下：

標題標簽<title>……</title>

<title>標簽是成對出現的，用以規定HTML文檔的標題。在<title>……</title>之間的內容將顯示在web瀏覽器窗口的標題欄中。另外，<title>……</title>標簽對只能放在<head>……</head>標簽對之間，而且其內部不能包含其它標簽。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
</html>

修改后顯示如下：

主體標簽<body>……</body>

<body>標簽也是成對出現的。在<body>……</body>之間的內容將顯示在web瀏覽器窗口的用戶區內，它是HTML文檔的主體部分。可以把HTML文檔的主體區域簡單地理解成標題以外的所有部分，該部分可以包含<table>、<font>、<img>、<div>等標簽。結束標簽</body>指明主體區域的結尾，在<body>中可以規定整個文檔的一些基本屬性：

“bgcolor”：指定html文檔的背景色
“text”：指定html文檔中文字的顏色
“link”：指定html文檔中待連接超鏈接對象的顏色
“alink”：指定html文檔中連接中超鏈接對象的顏色
“vlink”：指定html文檔中已連接超鏈接對象的顏色
“background”：指定html文檔的背景文件

我們驗證了前兩個屬性

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>

<body bgcolor="11ffff" text="000000">
  測試內容
?
</body>
</html>

顯示效果如下：

特殊字符

在html中有許多特殊字符需要處理，例如：“<”、">"這兩個符號本身是用來表示標簽的開始和結束的，是沒有辦法通過直接打出來的，必須輸入編碼表示法：“<”和“>”。

通常情況下html會自動截取多余的空格。不管你加多少個空格，都被看做一個空格。如果要顯示多個空格，可以使用表示空格

我們看看實現代碼

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
  <測試內容>  空格在中間 看到了吧
?
</body>
</html>

顯示效果：

格式標簽

在瀏覽器中控制文本對象的顯示，包括段落、換行、水平線等標簽，下面介紹幾個常用的html格式標簽。所有的格式標簽全部都是在嵌套在<body>……</body>標簽對之間的

段落標簽<p>

全稱paragraph。<p>……</p>標簽對用于創建一個段落，支持align屬性來設置對齊方式，語法如下：

<p align=“屬性”>段落內容</p>
align：設定水平對齊方式，常見設置：
置左：align=“left”
置中：align=“center”
置右：align=“right”我們驗證一個居中的對齊方式吧

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
  <p align="center"><測試內容>  空格在中間 看到了吧</p>
?
</body>
</html>

顯示效果：

換行標簽

在不另起一段的情況下將當前文本強制換行，<br>標簽屬于單獨出現的標簽，禁止出現結束標簽。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
  <p align="center"><測試內容></br>  空格在中間 看到了吧</p>
?
</body>
</html>

顯示效果：

預格式化標簽<pre>

可以完整保留設計者在源文件中所定義的格式，包含各種空格，縮進，以及其他特殊字符，全部都原封不動的展示在瀏覽器頁面上。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
  <p align="center"><測試內容></br>  空格在中間 看到了吧</p>
<pre>
我是菜鳥小白
你們的好朋友
?
  讓我們一起學習吧！！！
</pre>
?
</body>
</html>

顯示效果：

列表標簽

主要分為無序列表、排序列表、目錄列表、菜單列表和描述性列表五種類型

無序列表<ul><li>……</li></ul>
排序列表<ol><li>……</li></ol>
目錄列表
菜單列表
描述性列表<dl><dt>列表頭<dd>列表內容?我們就驗證一個無序列表和一個描述性列表吧?無序列表：

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
<ul>
<li>我是菜鳥小白</li>
<li>你們的好朋友</li>
?
<li>  讓我們一起學習吧！！！</li>
</ul>
?
</body>
</html>

效果如下：

?描述性列表：

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
<dl>
<dt>菜鳥小白測試表頭</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd>  讓我們一起學習吧！！！</dd>
<dt>菜鳥小白測試表頭2</dt>
<dd>我是菜鳥小白</dd>
<dd>你們的好朋友</dd>
<dd>  讓我們一起學習吧！！！</dd>
</dl>
?
</body>
</html>

顯示效果如下：

好了，今天的內容就到這了，我們明天繼續學習HTML基礎內容，不見不散~

在線咨詢

上一篇：第66節表單按鈕下拉選項及表單序列化-Web前端開發之JavaScript
下一篇：JavaScript的基本數據類型如何使用？

您的項目需求

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

整合營銷服務商

12.HTML創建和格式化表格

創建表格

在Word或類似文檔編輯器中創建表格

在HTML中創建表格

格式化表格

文檔編輯器中的格式化

HTML中的格式化

實例

文檔編輯器實例

HTML實例

結論

HTML概述

HTML文檔結構

HTML標簽

頭部標簽<head>……</head>

標題標簽<title>……</title>

主體標簽<body>……</body>

特殊字符

格式標簽

段落標簽<p>

換行標簽

預格式化標簽<pre>

列表標簽

您的項目需求