整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          、什么是合并單元格?

          一個表格中分為 行 和 列 ,有時候你經常在網頁中看到類似這樣的表格,有時候是合并了列,有時候是合并了行。那么這個是怎么做的?也是通過下面的方法實現的。

          二、怎么合并?

          向單元格添加屬性即可實現,合并 列 和 行的屬性不一樣

          1、合并列的屬性:clospan="2" //要合并幾列數字就是幾

          2、合并行的屬性:rowspan="2" //同理,要合并幾行數字就是幾

          3、合并后的單元格(行或列)必然會自動多出來一個,需要手動刪掉。

          4、重點:合并單元格只和 td 標簽有關系:

          (1)合并列:是左右合并,在左側的 td 標簽中添加 colspan="2" 要合并的 td 的數量。

          (2)合并行:是上下合并,在上面的 td 標簽中添加 rowspan="2" 要合并的td的數量。

          (3)合并完后刪除多余的 td 標簽。

          三、兩個屬性的用法

          1、合并 列 的用法:

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

          例如要合并第4行的,第4和第5列:

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

          2、合并 行 的用法:

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

          完整代碼:↓

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

          1-文字由什么組成?

          文字標簽在“body”標簽下,由文本標簽比如:標題<h1>~<h6>,段落<p></p>等;

          2-圖片怎么顯示的?

          圖片標簽img單標簽,也是在“body”標簽下 ,顯示引用文件;

          3-音頻、視頻、標簽

          音頻標簽“audio”和視頻標簽“video”,這兩個標簽都是雙標記,引用文件顯示內容,本身是一個功能。

          4-超鏈接

          超鏈接標簽“a href="路徑位置"”是單標記,需要有載體,點擊活著觸發跳轉。

          以下是示例:

          <body>

          <h1>這是標題也是文字</h1>

          <p>這是段落,文本,文字</p>
          <img src="./image/1auto的副本.gif" alt="300"><br> 這是一個圖片標簽<br><br>

          <!--img是圖片-->
          <audio src="./image/yinyue.mp3" controls></audio><br>

          這是一段音頻,由音頻標簽讓其顯示<br><br>

          <!--audio是音頻標簽-->

          <video src="./image/shipin的副本.mp4" width="600"> </video><br>

          <!--這里是一個視頻-->

          <a href="https://www.baidu.com"><br> 這是一個鏈接,點擊夠可以跳轉</a>

          <!--這是一個鏈接標簽-->
          </body>

          </html>

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

          下圖是顯示

          個人理解,如有錯漏,請留言指正。


          主站蜘蛛池模板: 一区二区三区日本视频| 成人国产精品一区二区网站| 变态拳头交视频一区二区| 精品熟人妻一区二区三区四区不卡| 国产乱码精品一区三上| 99在线精品一区二区三区| 日韩精品一区二区三区大桥未久| 黑人一区二区三区中文字幕| 无码人妻精品一区二区蜜桃| 精品亚洲AV无码一区二区| 一区二区免费视频| 国语精品一区二区三区| 午夜精品一区二区三区在线观看| 国产精品亚洲一区二区在线观看| 2020天堂中文字幕一区在线观| 日韩精品成人一区二区三区| 免费一区二区三区| 日本中文字幕一区二区有码在线| 中文字幕精品无码一区二区 | 高清国产AV一区二区三区| 亚洲成a人一区二区三区| 国产高清一区二区三区四区| 夜色阁亚洲一区二区三区| 合区精品久久久中文字幕一区| 精品在线一区二区| 成人无码一区二区三区| 91久久精一区二区三区大全 | 中文字幕日韩欧美一区二区三区| 亚洲乱色熟女一区二区三区蜜臀| 亚洲高清一区二区三区电影| 精品久久久久久无码中文字幕一区| 亚洲av乱码一区二区三区按摩| 精品人妻少妇一区二区三区不卡 | 亚洲欧美日韩国产精品一区| 在线|一区二区三区| 精品视频在线观看一区二区| 一区二区三区美女视频| 国产一区二区中文字幕| 精品午夜福利无人区乱码一区| 亚洲午夜精品一区二区麻豆| 日本精品少妇一区二区三区|