整合營銷服務商

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

          免費咨詢熱線:

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

          格是組織和顯示數據的一種有效方式,無論是在文檔中還是網頁上。良好的表格設計可以提高信息的可讀性和易理解性。本文將詳細介紹如何創建和格式化表格,并提供一些實例。

          創建表格

          在Word或類似文檔編輯器中創建表格

          1. 插入表格:打開文檔編輯器,例如Microsoft Word,找到“插入”選項卡,點擊“表格”,選擇需要的行數和列數。
          2. 輸入數據:點擊表格中的單元格,開始輸入數據。可以使用Tab鍵在單元格之間跳轉。
          3. 調整行列:根據需要調整行高和列寬。在Word中,可以通過拖動表格邊框來調整,或者點擊右鍵選擇“表格屬性”進行精確設置。

          在HTML中創建表格

          <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> 標簽用于創建表格。
          • <tr> 標簽定義表格中的行。
          • <th> 標簽定義表頭單元格,通常加粗居中顯示。
          • <td> 標簽定義標準單元格。

          格式化表格

          格式化表格包括調整表格的樣式、布局和顏色等,以提高其可讀性和美觀性。

          文檔編輯器中的格式化

          1. 邊框樣式:可以為表格或單個單元格設置邊框樣式、顏色和寬度。在Word中,選擇表格,然后在“設計”選項卡中選擇邊框樣式。
          2. 單元格填充:為了區分不同的行或列,可以對單元格進行顏色填充。在Word中,選擇單元格或行列,然后在“布局”選項卡中選擇“填充”。
          3. 文本對齊:文本對齊方式可以設置為左對齊、居中或右對齊。選擇單元格后,在“布局”選項卡中選擇對齊方式。
          4. 合并單元格:有時需要將多個單元格合并為一個單元格以顯示標題或其他信息。選擇要合并的單元格,然后點擊“合并單元格”。

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

          實例

          文檔編輯器實例

          假設我們需要創建一個3x3的表格,顯示一個小型團隊的成員信息。

          1. 插入一個3行3列的表格。
          2. 輸入數據:姓名、職位、郵箱。
          3. 設置第一行為表頭,加粗并填充淡藍色背景。
          4. 設置所有單元格的文本為居中對齊。
          5. 為表格添加外邊框,并為行添加細邊框。

          HTML實例

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

          在這個HTML實例中,我們創建了一個帶有條紋效果的表格,表頭有綠色背景和白色文字,每個單元格都有適當的填充和邊框。

          結論

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

          可以使用 HTML 創建表格。

          實例

          表格

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p>每個表格由 table 標簽開始。</p>

          <p>每個表格行由 tr 標簽開始。</p>

          <p>每個表格數據由 td 標簽開始。</p>

          <h4>一列:</h4>

          <table border="1">

          <tr>

          <td>100</td>

          </tr>

          </table>

          <h4>一行三列:</h4>

          <table border="1">

          <tr>

          <td>100</td>

          <td>200</td>

          <td>300</td>

          </tr>

          </table>

          <h4>兩行三列:</h4>

          <table border="1">

          <tr>

          <td>100</td>

          <td>200</td>

          <td>300</td>

          </tr>

          <tr>

          <td>400</td>

          <td>500</td>

          <td>600</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          這個例子演示如何在 HTML 文檔中創建表格。

          表格邊框

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>帶有普通的邊框:</h4>

          <table border="1">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          <h4>帶有粗的邊框:</h4>

          <table border="8">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          <h4>帶有很粗的邊框:</h4>

          <table border="15">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示各種類型的表格邊框。

          表格

          表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

          <table border="1">

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下:

          row 1, cell 1 row 1, cell 2

          row 2, cell 1 row 2, cell 2

          表格和邊框屬性

          如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。

          使用邊框屬性來顯示一個帶有邊框的表格:

          <table border="1">

          <tr>

          <td>Row 1, cell 1</td>

          <td>Row 1, cell 2</td>

          </tr>

          </table>

          表格的表頭

          表格的表頭使用 <th> 標簽進行定義。

          大多數瀏覽器會把表頭顯示為粗體居中的文本:

          <table border="1">

          <tr>

          <th>Heading</th>

          <th>Another Heading</th>

          </tr>

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>row 2, cell 1</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器顯示如下:

          Heading Another Heading

          row 1, cell 1 row 1, cell 2

          row 2, cell 1 row 2, cell 2

          表格中的空單元格

          在一些瀏覽器中,沒有內容的表格單元顯示得不太好。如果某個單元格是空的(沒有內容),瀏覽器可能無法顯示出這個單元格的邊框。

          <table border="1">

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td></td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          表格中的空單元格

          注意:這個空的單元格的邊框沒有被顯示出來。為了避免這種情況,在空單元格中添加一個空格占位符,就可以將邊框顯示出來。

          <table border="1">

          <tr>

          <td>row 1, cell 1</td>

          <td>row 1, cell 2</td>

          </tr>

          <tr>

          <td>&nbsp;</td>

          <td>row 2, cell 2</td>

          </tr>

          </table>

          在瀏覽器中顯示如下:

          row 1, cell 1 row 1, cell 2

          row 2, cell 2

          更多實例

          沒有邊框的表格

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>這個表格沒有邊框:</h4>

          <table>

          <tr>

          <td>100</td>

          <td>200</td>

          <td>300</td>

          </tr>

          <tr>

          <td>400</td>

          <td>500</td>

          <td>600</td>

          </tr>

          </table>

          <h4>這個表格也沒有邊框:</h4>

          <table border="0">

          <tr>

          <td>100</td>

          <td>200</td>

          <td>300</td>

          </tr>

          <tr>

          <td>400</td>

          <td>500</td>

          <td>600</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示一個沒有邊框的表格。

          表格中的表頭(Heading)

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>表頭:</h4>

          <table border="1">

          <tr>

          <th>姓名</th>

          <th>電話</th>

          <th>電話</th>

          </tr>

          <tr>

          <td>Bill Gates</td>

          <td>555 77 854</td>

          <td>555 77 855</td>

          </tr>

          </table>

          <h4>垂直的表頭:</h4>

          <table border="1">

          <tr>

          <th>姓名</th>

          <td>Bill Gates</td>

          </tr>

          <tr>

          <th>電話</th>

          <td>555 77 854</td>

          </tr>

          <tr>

          <th>電話</th>

          <td>555 77 855</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何顯示表格表頭。

          空單元格

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <table border="1">

          <tr>

          <td>Some text</td>

          <td>Some text</td>

          </tr>

          <tr>

          <td></td>

          <td>Some text</td>

          </tr>

          </table>

          <p>正如您看到的,其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后,仍然沒有邊框。</p>

          <p>我們的技巧是在單元中插入一個 no-breaking 空格。</p>

          <p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體,請閱讀關于字符實體的章節。</p>

          <p>no-breaking 空格由和號開始 ("&"),然后是字符"nbsp",并以分號結尾(";")。</p>

          </body>

          </html>

          [/demo]

          本例展示如何使用 "&nbsp;" 處理沒有內容的單元格。

          帶有標題的表格

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>這個表格有一個標題,以及粗邊框:</h4>

          <table border="6">

          <caption>我的標題</caption>

          <tr>

          <td>100</td>

          <td>200</td>

          <td>300</td>

          </tr>

          <tr>

          <td>400</td>

          <td>500</td>

          <td>600</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示一個帶標題 (caption) 的表格

          跨行或跨列的表格單元格

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>橫跨兩列的單元格:</h4>

          <table border="1">

          <tr>

          <th>姓名</th>

          <th colspan="2">電話</th>

          </tr>

          <tr>

          <td>Bill Gates</td>

          <td>555 77 854</td>

          <td>555 77 855</td>

          </tr>

          </table>

          <h4>橫跨兩行的單元格:</h4>

          <table border="1">

          <tr>

          <th>姓名</th>

          <td>Bill Gates</td>

          </tr>

          <tr>

          <th rowspan="2">電話</th>

          <td>555 77 854</td>

          </tr>

          <tr>

          <td>555 77 855</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何定義跨行或跨列的表格單元格。

          表格內的標簽

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <table border="1">

          <tr>

          <td>

          <p>這是一個段落。</p>

          <p>這是另一個段落。</p>

          </td>

          <td>這個單元包含一個表格:

          <table border="1">

          <tr>

          <td>A</td>

          <td>B</td>

          </tr>

          <tr>

          <td>C</td>

          <td>D</td>

          </tr>

          </table>

          </td>

          </tr>

          <tr>

          <td>這個單元包含一個列表:

          <ul>

          <li>蘋果</li>

          <li>香蕉</li>

          <li>菠蘿</li>

          </ul>

          </td>

          <td>HELLO</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何顯示在不同的元素內顯示元素。

          單元格邊距(Cell padding)

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>沒有 cellpadding:</h4>

          <table border="1">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          <h4>帶有 cellpadding:</h4>

          <table border="1"

          cellpadding="10">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。

          單元格間距(Cell spacing)

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>沒有 cellspacing:</h4>

          <table border="1">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          <h4>帶有 cellspacing:</h4>

          <table border="1"

          cellspacing="10">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何使用 Cell spacing 增加單元格之間的距離。

          向表格添加背景顏色或背景圖像

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>背景顏色:</h4>

          <table border="1"

          bgcolor="red">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          <h4>背景圖像:</h4>

          <table border="1"

          background="./imagecopy1234567890/test.gif">

          <tr>

          <td>First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td>Second</td>

          <td>Row</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何向表格添加背景。

          向表格單元添加背景顏色或者背景圖像

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h4>單元背景:</h4>

          <table border="1">

          <tr>

          <td bgcolor="red">First</td>

          <td>Row</td>

          </tr>

          <tr>

          <td

          background="./imagecopy1234567890/test.gif">

          Second</td>

          <td>Row</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何向一個或者更多表格單元添加背景。

          在表格單元中排列內容

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <table width="400" border="1">

          <tr>

          <th align="left">消費項目....</th>

          <th align="right">一月</th>

          <th align="right">二月</th>

          </tr>

          <tr>

          <td align="left">衣服</td>

          <td align="right">1.10</td>

          <td align="right">.20</td>

          </tr>

          <tr>

          <td align="left">化妝品</td>

          <td align="right">.00</td>

          <td align="right">.45</td>

          </tr>

          <tr>

          <td align="left">食物</td>

          <td align="right">0.40</td>

          <td align="right">0.00</td>

          </tr>

          <tr>

          <th align="left">總計</th>

          <th align="right">01.50</th>

          <th align="right">4.65</th>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何使用 "align" 屬性排列單元格內容,以便創建一個美觀的表格。

          框架(frame)屬性

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <p><b>注釋:</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p>

          <p>Table with frame="box":</p>

          <table frame="box">

          <tr>

          <th>Month</th>

          <th>Savings</th>

          </tr>

          <tr>

          <td>January</td>

          <td>0</td>

          </tr>

          </table>

          <p>Table with frame="above":</p>

          <table frame="above">

          <tr>

          <th>Month</th>

          <th>Savings</th>

          </tr>

          <tr>

          <td>January</td>

          <td>0</td>

          </tr>

          </table>

          <p>Table with frame="below":</p>

          <table frame="below">

          <tr>

          <th>Month</th>

          <th>Savings</th>

          </tr>

          <tr>

          <td>January</td>

          <td>0</td>

          </tr>

          </table>

          <p>Table with frame="hsides":</p>

          <table frame="hsides">

          <tr>

          <th>Month</th>

          <th>Savings</th>

          </tr>

          <tr>

          <td>January</td>

          <td>0</td>

          </tr>

          </table>

          <p>Table with frame="vsides":</p>

          <table frame="vsides">

          <tr>

          <th>Month</th>

          <th>Savings</th>

          </tr>

          <tr>

          <td>January</td>

          <td>0</td>

          </tr>

          </table>

          </body>

          </html>

          [/demo]

          本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。

          表格標簽

          表格 描述

          <table> 定義表格

          <caption> 定義表格標題。

          <th> 定義表格的表頭。

          <tr> 定義表格的行。

          <td> 定義表格單元。

          <thead> 定義表格的頁眉。

          <tbody> 定義表格的主體。

          <tfoot> 定義表格的頁腳。

          <col> 定義用于表格列的屬性。

          <colgroup> 定義表格列的組。


          主站蜘蛛池模板: 久久影院亚洲一区| 亚洲免费一区二区| 亚洲线精品一区二区三区影音先锋| 一区二区三区在线视频播放| 免费一区二区无码东京热| 精品乱码一区内射人妻无码| 日韩爆乳一区二区无码| 国产午夜三级一区二区三| 国产女人乱人伦精品一区二区| 狠狠综合久久AV一区二区三区 | 亚洲日本一区二区三区| 日韩精品一区二区三区在线观看| 97久久精品无码一区二区| 日本不卡一区二区视频a| 亚洲无线码一区二区三区| 国产一区玩具在线观看| 国精品无码A区一区二区| 亚洲性日韩精品国产一区二区| 一区二区三区在线观看免费| 亚洲一区二区视频在线观看| 免费一区二区无码东京热| 国产熟女一区二区三区四区五区 | 国产高清一区二区三区视频| 国语精品一区二区三区| 久久久久99人妻一区二区三区| 全国精品一区二区在线观看| 一区二区三区四区电影视频在线观看| 国产一区二区三区亚洲综合| 亚洲成av人片一区二区三区 | 无码人妻精品一区二区蜜桃AV| 国产在线精品一区在线观看| 中文字幕在线精品视频入口一区| 精品国产一区二区三区久久| 日本一区二区视频| 国产在线精品一区二区三区不卡| 精品一区二区三区东京热| 色一情一乱一伦一区二区三区日本 | 亚洲成人一区二区| 精品国产鲁一鲁一区二区| 国产一区二区三区夜色| 在线观看中文字幕一区|