HTML表格標簽的使用方法與示例

挑戰30天在頭條寫日記#

HTML是一種用于創建網頁結構和內容的標記語言，其中包含了許多標簽，可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法，并通過示例展示如何創建表格。

1. <tr>標簽的作用： <tr>標簽代表HTML表格中的一行（行數據），它可以包含一個或多個<td>元素作為單元格。

2. <td>標簽的作用： <td>標簽用于定義表格中的一個單元格（列數據），可以包含文本、圖像、鏈接等內容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標簽時，首先需要創建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設置邊框、背景顏色等。以下是一個簡單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應用： 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結： 通過本文的介紹，我們了解了HTML中<tr>和<td>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

知道大家處理Excel數據的時候有沒有遇到需要批量插入圖片的情況，比如在管理員工信息時，需要給每個員工添加一個頭像，如果一張一張插入，插入后再調整大小，對齊方式，效率太低了，而且眼睛都能看瞎了。今天我在這里給大家分享一個批量插入圖片的小技巧。

首先準備好以下圖片素材：

然后準備好表格：

在C2單元格中輸入「<table><img src="D:\圖片\孫藝珍.jpg" width="120" height="80">」，并按回車鍵，然后按快捷鍵「Ctrl+E」自動智能填充C3:C5單元格，生成圖片地址信息。并且必須保證路徑為「D:\圖片\孫藝珍.jpg"」的圖片存在。

「<table><img src="D:\圖片\孫藝珍.jpg" width="120" height="80">」為前端Html開發語言，沒有學過編程的朋友應該很難理解，大概解釋一下「width="120" height="80"」表示圖片的寬和高，單位為像素，「D:\圖片\孫藝珍.jpg」表示圖片路徑，所以只需要復制這句代碼，然后把圖片路徑替換一下就可以，還可以改改寬和高的大小。

選中C2:C5單元格區域，按快捷鍵「Ctrl+C」復制內容，然后打開記事本，按快捷鍵「Ctrl+V」把內容復制到記事本中。

然后清空C2:C5單元格區域內容，并調整C2:C5區域單元格寬為150像素，高為100像素。這里需要說明的是這兒的單元格的寬和高單位像素和上面路徑中圖片的寬高單位像素并不是完全相同，所以單元格這里我調整為寬150像素高100像素，正好對應圖片寬120像素高80像素。當然這些都可以根據自己的實際情況進行調整。

然后打開剛才的記事本，按快捷鍵「Ctrl+A」全選內容并按快捷鍵「Ctrl+C」復制內容。切換會Excel中，鼠標選中C2單元格，右擊鼠標調出右鍵菜單，選擇「選擇性粘貼」調出選擇性粘貼對話框。

選擇「Unicode文本」并按確定按鈕即可。

下面來看看具體演示過程：

具名稱：Kutools for Excel

工具類型：電腦軟件，國外

功能簡介：

有時需要在excel表格中整理圖片網址和圖片。

有了圖片網址后，可以根據圖片網址，批量下載并插入對應的圖片。

是否付費：

該功能免費，更多其他功能可能收費。

支持平臺：Office Excel

工具鏈接：

官網鏈接

https://zh-cn.extendoffice.com/product/kutools-for-excel.html

該功能詳細使用說明

https://zh-cn.extendoffice.com/product/kutools-for-excel/excel-insert-display-image-from-url-path.html

在線咨詢

上一篇：因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離
下一篇：jQuery - 刪除元素

您的項目需求

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

整合營銷服務商

HTML表格標簽的使用方法與示例

您的項目需求