HTML表格標(biāo)簽的使用方法與示例

挑戰(zhàn)30天在頭條寫日記#

HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，其中包含了許多標(biāo)簽，可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法，并通過示例展示如何創(chuàng)建表格。

1. <tr>標(biāo)簽的作用： <tr>標(biāo)簽代表HTML表格中的一行（行數(shù)據(jù)），它可以包含一個(gè)或多個(gè)<td>元素作為單元格。

2. <td>標(biāo)簽的作用： <td>標(biāo)簽用于定義表格中的一個(gè)單元格（列數(shù)據(jù)），可以包含文本、圖像、鏈接等內(nèi)容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標(biāo)簽時(shí)，首先需要?jiǎng)?chuàng)建一個(gè)<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標(biāo)簽，如下所示：

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

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

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

5. 示例應(yīng)用： 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個(gè)包含姓名、年齡和城市的簡(jiǎn)單表格：

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. 總結(jié)： 通過本文的介紹，我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法，以及如何創(chuàng)建簡(jiǎn)單的表格和添加樣式。使用這些標(biāo)簽，我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格，提升頁面的可讀性和可視性。

、什么是合并單元格？

一個(gè)表格中分為行和列，有時(shí)候你經(jīng)常在網(wǎng)頁中看到類似這樣的表格，有時(shí)候是合并了列，有時(shí)候是合并了行。那么這個(gè)是怎么做的？也是通過下面的方法實(shí)現(xiàn)的。

二、怎么合并？

向單元格添加屬性即可實(shí)現(xiàn)，合并列和行的屬性不一樣

1、合并列的屬性：clospan="2" //要合并幾列數(shù)字就是幾

2、合并行的屬性：rowspan="2" //同理，要合并幾行數(shù)字就是幾

3、合并后的單元格（行或列）必然會(huì)自動(dòng)多出來一個(gè)，需要手動(dòng)刪掉。

4、重點(diǎn)：合并單元格只和 td 標(biāo)簽有關(guān)系：

（1）合并列：是左右合并，在左側(cè)的 td 標(biāo)簽中添加 colspan="2" 要合并的 td 的數(shù)量。

（2）合并行：是上下合并，在上面的 td 標(biāo)簽中添加 rowspan="2" 要合并的td的數(shù)量。

（3）合并完后刪除多余的 td 標(biāo)簽。

三、兩個(gè)屬性的用法

1、合并列的用法：

（1）首先確定你要合并的單元格在第幾行第幾列，然后找到它，從他的td標(biāo)簽中添加屬性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三節(jié)</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并行的用法：

例如下面：合并第3行和第4行的第1列。

完整代碼：↓

頁html的組成是由：文字、圖片、音頻、視頻、超鏈接組成。

1-文字由什么組成？

文字標(biāo)簽在“body”標(biāo)簽下，由文本標(biāo)簽比如：標(biāo)題<h1>~<h6>,段落<p></p>等；

2-圖片怎么顯示的？

圖片標(biāo)簽img單標(biāo)簽，也是在“body”標(biāo)簽下，顯示引用文件；

3-音頻、視頻、標(biāo)簽

音頻標(biāo)簽“audio”和視頻標(biāo)簽“video”，這兩個(gè)標(biāo)簽都是雙標(biāo)記，引用文件顯示內(nèi)容，本身是一個(gè)功能。

4-超鏈接

超鏈接標(biāo)簽“a href="路徑位置"”是單標(biāo)記，需要有載體，點(diǎn)擊活著觸發(fā)跳轉(zhuǎn)。

以下是示例：

<body>

<h1>這是標(biāo)題也是文字</h1>

<audio src="./image/yinyue.mp3" controls></audio><br>

這是一段音頻，由音頻標(biāo)簽讓其顯示<br><br>

<a href="https://www.baidu.com"><br> 這是一個(gè)鏈接，點(diǎn)擊夠可以跳轉(zhuǎn)</a>

</body>

</html>

----------------------------------------------------------------------------

下圖是顯示

個(gè)人理解，如有錯(cuò)漏，請(qǐng)留言指正。

在線咨詢

上一篇：HTML DOM td/th 對(duì)象
下一篇：微信公眾號(hào)運(yùn)營(yíng)分享：輔助運(yùn)營(yíng)工具大全（干貨）

您的項(xiàng)目需求

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

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

HTML表格標(biāo)簽的使用方法與示例

、什么是合并單元格？

二、怎么合并？

三、兩個(gè)屬性的用法

您的項(xiàng)目需求