12.HTML創(chuàng)建和格式化表格

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

創(chuàng)建表格

在Word或類似文檔編輯器中創(chuàng)建表格

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

在HTML中創(chuàng)建表格

<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> 標(biāo)簽用于創(chuàng)建表格。
<tr> 標(biāo)簽定義表格中的行。
<th> 標(biāo)簽定義表頭單元格，通常加粗居中顯示。
<td> 標(biāo)簽定義標(biāo)準(zhǔn)單元格。

格式化表格

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

文檔編輯器中的格式化

邊框樣式：可以為表格或單個(gè)單元格設(shè)置邊框樣式、顏色和寬度。在Word中，選擇表格，然后在“設(shè)計(jì)”選項(xiàng)卡中選擇邊框樣式。
單元格填充：為了區(qū)分不同的行或列，可以對(duì)單元格進(jìn)行顏色填充。在Word中，選擇單元格或行列，然后在“布局”選項(xiàng)卡中選擇“填充”。
文本對(duì)齊：文本對(duì)齊方式可以設(shè)置為左對(duì)齊、居中或右對(duì)齊。選擇單元格后，在“布局”選項(xiàng)卡中選擇對(duì)齊方式。
合并單元格：有時(shí)需要將多個(gè)單元格合并為一個(gè)單元格以顯示標(biāo)題或其他信息。選擇要合并的單元格，然后點(diǎn)擊“合并單元格”。

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 設(shè)置為 collapse 以消除單元格之間的間隙。
th, td 設(shè)置了邊框、填充和文本對(duì)齊。
th 設(shè)置了表頭的背景色。
tr:nth-child(even) 為偶數(shù)行設(shè)置了條紋效果。

實(shí)例

文檔編輯器實(shí)例

假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)3x3的表格，顯示一個(gè)小型團(tuán)隊(duì)的成員信息。

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

HTML實(shí)例

<!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>

在這個(gè)HTML實(shí)例中，我們創(chuàng)建了一個(gè)帶有條紋效果的表格，表頭有綠色背景和白色文字，每個(gè)單元格都有適當(dāng)?shù)奶畛浜瓦吙颉?/p>

結(jié)論

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

性為 HTML 元素提供附加信息。

HTML 屬性

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。

屬性總是在 HTML 元素的開始標(biāo)簽中規(guī)定。

屬性實(shí)例

HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：

<a >This is a link</a>

更多 HTML 屬性實(shí)例

屬性例子 1:

<h1> 定義標(biāo)題的開始。

<h1 align="center"> 擁有關(guān)于對(duì)齊方式的附加信息。

屬性例子 2:

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關(guān)于背景顏色的附加信息。

屬性例子 3:

<table> 定義 HTML 表格。（您將在稍后的章節(jié)學(xué)習(xí)到更多有關(guān) HTML 表格的內(nèi)容）

<table border="1"> 擁有關(guān)于表格邊框的附加信息。

HTML 提示：使用小寫屬性

屬性和屬性值對(duì)大小寫不敏感。

不過，萬維網(wǎng)聯(lián)盟在其 HTML 4 推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號(hào)

屬性值應(yīng)該始終被包括在引號(hào)內(nèi)。雙引號(hào)是最常用的，不過使用單引號(hào)也沒有問題。

在某些個(gè)別的情況下，比如屬性值本身就含有雙引號(hào)，那么您必須使用單引號(hào)，例如：

name='Bill "HelloWorld" Gates'

HTML 屬性參考手冊(cè)

我們的完整的 HTML 參考手冊(cè)提供了每個(gè) HTML 元素可使用的合法屬性的完整列表：

下面列出了適用于大多數(shù) HTML 元素的屬性：

序列表和有序列表

用于呈現(xiàn)邏輯上并列的具有相關(guān)性的數(shù)據(jù)內(nèi)容.

<ul>
<li></li>
</ul>

ul元素可以用type屬性設(shè)置不同的列表標(biāo)記:

disc: 實(shí)心圓點(diǎn)

circle: 空心圓圈

square: 實(shí)心正方形

<ol>
<li></li>
</ol>

ol元素也可以設(shè)置不同的標(biāo)記:

1: 阿拉伯?dāng)?shù)字

i: 小寫羅馬數(shù)字

I: 大寫羅馬數(shù)字

A: 大寫字母

a: 小寫字母

定義列表

適用呈現(xiàn)包含主題及描述的數(shù)據(jù)內(nèi)容.

<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表頭

tbody: 表體

tfoot: 表腳

th: 專用于表頭中的單元格, 其具有自動(dòng)加粗并且居中的效果.

表格的屬性控制:

border: 邊框

bordercolor: 邊框顏色

width: 寬度

height: 高度

cellspacing: 單元格間距(外)

cellpadding: 單元格填充(內(nèi))

align: 表格的位置控制

單元格的屬性控制:

align

valign

如何合并單元格/跨行或跨列?

注意: 合并后, 會(huì)引發(fā)單元格數(shù)量的減少!

列表練習(xí)案例源碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

在線咨詢

上一篇：CSS段落對(duì)齊方式，系統(tǒng)認(rèn)識(shí)塊級(jí)元素與內(nèi)聯(lián)元素，CSS前端進(jìn)階篇
下一篇：用 Java 拿下 HTML 分分鐘寫個(gè)小爬蟲

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商