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>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

TML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽 img 以及和他相關的屬性。

1.使用方法

<img src="路徑/文件名.圖片格式" width="屬性值" height="屬性值" border="屬性值" alt="屬性值">

2.屬性

src：指定我們要加載的圖片的路徑和圖片的名稱以及圖片格式。
width：指定圖片的寬度，單位px、em、cm、mm。
height：指定圖片的高度，單位px、em、cm、mm。
border：指定圖標的邊框寬度，單位px、em、cm、mm。
title：當網頁上的圖片被加載完成后，鼠標移動到上面去，會顯示這個圖片指定的屬性文字,也就是鼠標懸停時顯示的內容。
alt：如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示；搜索引擎可以通過這個屬性的文字來抓取圖片。

3.注意

img 為單標記，不需要使用 img 閉合
在加載圖像文件的時候，文件的路徑或者文件名文件格式錯誤，將無法加載圖片

4.舉例

<img src="img/gzh.jpg" width="200px" height="200px" border="3px" title="碼海無際" alt="二維碼"><img src="img/gzh.jp" width="200px" height="200px" border="3px" title="碼海無際" alt="二維碼">

文章介紹了html標簽里的input標簽和label標簽的美化效果！效果圖如下：

用在復選框中選擇，個性化了復選框的默認樣式，增強用戶體驗！

實現方法也非常簡單

下面看看代碼

html:

css:

在線咨詢

上一篇：25、HTTP2 / HTTP1 之間的區別是什么（高薪常問）
下一篇：深入淺出瀏覽器渲染原理

您的項目需求

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