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中。一個良好格式化的表格不僅能有效傳達信息，還能提升整體文檔或網頁的美觀性和專業性。通過實踐這些技巧和使用示例作為參考，你可以創建出既實用又吸引人的表格。

.表格的制作

1、表格元素–<table>

表格中的行–<tr>

表格中的列–<td>

表格中的表頭–【居中/加粗】

table標記的邊框–border

table標記的寬度–width

table標記的高度–height

table標記的水平對齊方式–align

table標記的表格背景色–bgcolor

table標記的表格邊框色–bordercolor

table標記的表格中的內容與邊框之間的距離–cellpadding

table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】

tr標記的align屬性–設置當前行的水平對齊方式

tr標記的bgcolor屬性–設置當前行的背景色

tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】

td標記的align屬性–設置當前列的水平對齊方式

td標記的bgcolor屬性–設置當前列的背景色

td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】

合并單元格

水平方向合并單元格–跨列—colspan

垂直方向合并單元格–跨行—rowspan
刪除多余的單元格*

以下是計算器的控制面板代碼

<!DOCTYPE html>

<html>

<head>

<title>計算器的控制面板</title>

</head>

<body>

<table border="1" cellspacing="10px" cellpadding="20px"

align="center" bgcolor="aliceblue">

</tr>

</tr>

</tr>

</tr>

<td rowspan="2" bgcolor="yellow">=

</td>

</tr>

</tr>

</table>

</body>

</html>

看成品:

2. 列表元素

2.1 有序列表

ol—有序列表

li—列表中的每一項【條目】

默認的標志是有順序的數字

我們可以通過ol的type屬性來修改標志

1–有順序的數字

a–有順序的小寫字母

A–有順序的大寫字母

i–有順序的小寫羅馬數字

I–有順序的大寫羅馬數字

start屬性設置書順序的開始值

2.2 無序列表

ul—無序列表

li—列表中的每一項【條目】

默認的標志是實心點

我們可以通過ul的type屬性來修改標志

circle–圓形【?！?/p>

disc----實心點[默認]

square–正方形

none–沒有標志

2.3 自定義列表

dl—自定義列表

dt—自定義列表的頭

dd—子項目

以下是有序，無序，和自定義列表

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ol>

<dl>

<dt>自定義列表</dt>

</dl>

</body>

</html>

3. 表單<form>

主要負責采集信息的，可以將采集的信息提交。

form的屬性

action—指定表單數據的后端處理程序

method----指定表單數據的提交方式【get[默認]/post】

get提交數據會將被處理的數據跟隨在請求地址之后

被提交的數據255個字符

https://www.baidu.com/s?&wd=html

post提交數據會將被處理的數據封裝到http協議的頭

https://www.baidu.com/s

被提交的數據沒有限制

通常情況下提交文件只能用post

enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>application/x-www-form-urlencoded</td>

<td>在發送前對所有字符進行編碼（默認）。</td>

</tr>

<tr>

<td>multipart/form-data</td>

<td>不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。

</td>

</tr>

<tr>

<td>text/plain</td>

<td>將空格轉換為 "+" 符號，但不編碼特殊字符。</td>

</tr>

</table>

</body>

</html>

表單元素

input 文本框/密碼框/單選按鈕/復選框…

seletc 下拉列表

textarea 文本域—富文本編輯器

格是頁面中常見的一中標簽，通常是用來數據展示的，而不是用來布局。

一、創建表格

語法

<table>

<tr>

<td>單元格內的文字</td>

...

</tr>

...

</table>

說明

table 標簽：定義一個表
tr 標簽：定義表格中的一行，必須嵌套在table標簽中，有幾對，表示表格有幾行
td 標簽：定義表格中的單元格，必須嵌套在標簽中，一對中包含幾對，就表示該行中有多少列（或多少個單元格）

注意

中只能嵌套
標簽，就像一個容器，可以容納所有的元素

表格屬性

設置表格的外觀樣式

表頭標簽

說明
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可
示例

代碼

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

標題標簽

表格標題標簽，為表格添加標題，跟隨表格的位置而移動。設置標題，我們用的是caption標簽。

語法

<caption style="text-align:left">My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

說明

將標題定位在表格的左|右|上|下位置。

示例

合并單元格（重點）

分類

跨行合并 rowspan=“合并單元格的個數”

跨列合并 colspan=“合并單元格的個數”

合并順序：先上后下，先左后右

代碼

...

姓名	張三	性別	李四	照片
家庭住址	張三	性別	李四	照片

```

合并方法：

（1）先確定是跨行還是跨列合并

（2）根據先上后下，先左后右的原則，找到目標單元格，寫上合并方式（rowspan/colspan）和要合并的單元格數量

（3）刪除多余的單元格

表格結構劃分（了解）

表格的結構劃分，使用thead、tbody 、tfoot 三種標簽

說明
標簽用于組合 HTML 表格的表頭內容元素應該與和元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）
語法

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

提示

（1）元素內部必須包含一個或者多個標簽。

（2） thead, tbody, 和 tfoot 元素默認不會影響表格的布局。用途主要是可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。

在線咨詢

上一篇：Jsp頁面中常見的page指令
下一篇：10個用于創建漂亮圖表的Javascript庫

您的項目需求

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

整合營銷服務商

12.HTML創建和格式化表格

創建表格

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

在HTML中創建表格

格式化表格

文檔編輯器中的格式化

HTML中的格式化

實例

文檔編輯器實例

HTML實例

結論

一、創建表格

表格屬性

表頭標簽

標題標簽

合并單元格（重點）

表格結構劃分（了解）

您的項目需求

一、創建表格