Websim.ai 之HTML結構與基本表格

日期：




See the Pen 這是h1 by 01 Scratchinai (@01-Scratchinai) on CodePen.





 基本表格1







  • 文件宣告

    • 首先輸入 <!DOCTYPE html>。
      說明：這一行告知瀏覽器文件的類型，表示這是一份 HTML 文件。

  • 開始撰寫 HTML 文件

    • 輸入 <html lang="zh-Hant">，接著在之後的最後一行輸入 </html>。
      說明：這兩行將整個文件的內容包覆在內，並且設定文件的語言為繁體中文。

  • 設定文件的頭部

    • 在 <html> 標籤內，接著輸入 <head> 並在其後加入 </head>。
      說明：head 區塊內放置與文件有關的設定與資訊，不會直接顯示在網頁上。

  • 設定文件編碼

    • 在 head 區塊中，輸入 <meta charset="UTF-8">。
      說明：這一行設定文件使用 UTF-8 編碼，確保各種語言文字能正確顯示。

  • 設定網頁標題

    • 緊接著輸入 <title>基本表格</title>。
      說明：title 標籤內的文字會顯示在瀏覽器的標籤或視窗標題上。

  • 建立主要內容區塊

    • 在 head 區塊結束後，輸入 <body>，最後以 </body> 結束。
      說明：body 區塊內放置的是網頁上實際呈現的內容。

  • 插入表格結構

    • 在 body 區塊內，輸入 <table>，並在表格內容完成後輸入 </table>。
      說明：table 標籤用來建立一個表格，之後所有的列與儲存格都會寫在這個範圍內。

  • 輸入第一列的內容

    • 在 table 區塊內，首先輸入 <tr> 來開始第一列。
      • 在這一行中，先輸入 <td>儲存格 1</td>，接著輸入 <td>儲存格 2</td>。
    • 輸入 </tr> 來結束這一列。
      說明：tr 標籤代表表格中的一行；每個 td 標籤代表該行中的一個儲存格，分別輸入 "儲存格 1" 與 "儲存格 2" 的內容。

  • 輸入第二列的內容

    • 在 table 區塊內，輸入另一個 <tr> 來開始第二列。
      • 在這一行中，輸入 <td>儲存格 3</td>，然後輸入 <td>儲存格 4</td>。
    • 最後輸入 </tr> 來結束第二列。
      說明：這一行同樣代表表格中的一行，並填入兩個儲存格的內容。

  • 完成 HTML 文件

    • 在表格、body 和 html 各自結束後，文件的所有結構都已完整輸入。
      說明：這樣，從文件宣告到 HTML、head、body、表格、列與儲存格的輸入都已依序完成，文件結構清晰、層次分明。



    •  基本表格2




    與上一段相比新增了的部分


    • 標題更新：原先的標題為「基本表格」，現更新為「帶表頭的表格」，讓使用者能一眼看出此表格包含了表頭資訊。
    • 新增表頭列：在表格中增加了第一列，使用 <th> 標籤分別定義「姓名」與「年齡」作為各欄位的標題。
    • 表格內容調整：原本的儲存格內容由「儲存格 1~4」改為更具意義的資料，「小明」及「18」作為第一筆資料，「小華」及「20」作為第二筆資料。

    編寫流程詳細說明

    1. 文件宣告

      • 輸入 <!DOCTYPE html>
        說明：這行用來告知瀏覽器，這是一份 HTML 文件，定義了文件的標準格式。

    2. 開始撰寫 HTML 文件

      • 輸入 <html lang="zh-Hant">，並在文件的最後輸入 </html>
        說明：這對標籤包住了整個文件內容，同時設定文件使用繁體中文。

    3. 建立文件頭部

      • 在 <html> 標籤內，輸入 <head> 並在其後加入 </head>
        說明：head 區塊用來存放與網頁設定相關的資訊，不會直接呈現在網頁上。

    4. 設定文件編碼與標題

      • 在 head 區塊內輸入 <meta charset="UTF-8">
        說明：這行確保文件以 UTF-8 編碼，讓各種文字能正確顯示。
      • 緊接著輸入 <title>帶表頭的表格</title>
        說明：這行設定了網頁的標題，新標題「帶表頭的表格」告知使用者表格中包含表頭資訊。

    5. 建立主要內容區塊

      • 在 head 區塊結束後，輸入 <body>，並在結尾輸入 </body>
        說明：body 區塊內放置的是網頁上實際顯示的內容。

    6. 建立表格

      • 在 body 區塊內輸入 <table>，並在所有表格內容輸入完畢後輸入 </table>
        說明：table 標籤用來建立一個表格，所有的列與儲存格都寫在這個範圍內。

    7. 新增表頭列

      • 在 table 內，第一行輸入 <tr>，代表開始一行。
      • 在這一行中，分別輸入 <th>姓名</th> 與 <th>年齡</th>
        說明：使用 <th> 標籤建立表頭儲存格，分別為「姓名」與「年齡」，讓表格的欄位標題更明確。
      • 輸入 </tr> 表示這一行結束。

    8. 輸入第一筆資料列

      • 接著輸入另一個 <tr>，開始新的資料列。
      • 在這一列中，依序輸入 <td>小明</td> 與 <td>18</td>
        說明：<td> 標籤用來填寫每個儲存格中的資料，此處記錄第一筆資料，代表名字為「小明」及年齡為「18」。
      • 輸入 </tr> 結束這一資料列。

    9. 輸入第二筆資料列

      • 再輸入一個 <tr>，開始第二筆資料的列。
      • 在這一列中，分別輸入 <td>小華</td> 與 <td>20</td>
        說明：這一列填入第二筆資料，分別代表「小華」及年齡「20」。
      • 輸入 </tr> 結束這一列。

    10. 完成 HTML 文件

      • 確認 <table>、<body> 與 <html> 標籤皆已正確關閉。
        說明：這樣從文件宣告到所有內容的輸入流程都已完成，文件結構清晰且層次分明。


    基本表格3




    【新增部分說明】

    1. 文件標題由「帶表頭的表格」改為「美化後的表格」，顯示這份文件已經加入了美化效果。
    2. 在 head 區塊中新增了一段 CSS 樣式設定（style 區塊）。這段樣式主要包含：
      • 對整個表格設定樣式，使表格邊框合併、寬度設為 60%、並透過 margin 調整使表格置中且有適當的上下間距。
      • 為所有的表頭（th）與儲存格（td）設定 1 像素實線邊框、10 像素的內距以及置中對齊，讓表格內容看起來更整齊。
      • 特別為表頭儲存格設定背景顏色，使表頭與資料列在視覺上區分得更明顯。

    【編寫流程詳細說明】

    1. 首先輸入文件宣告，這一步輸入「文件宣告：用 <!DOCTYPE html> 開頭」，這行指示瀏覽器該文件遵循 HTML 標準。

    2. 接著輸入整份文件的開啟標籤，輸入「<html lang="zh-Hant>」，設定文件語言為繁體中文，並在最後會輸入「</html>」作為結尾。

    3. 在 html 標籤內建立文件頭部區塊：輸入「<head>」，待所有 head 區塊內容輸入完後，再輸入「</head>」。

    4. 在 head 區塊中，首先設定文件編碼，輸入「<meta charset="UTF-8>」，以確保文件文字能正確顯示。

    5. 接下來設定文件標題：輸入「<title>美化後的表格</title>」，這個標題會在瀏覽器標籤中顯示，告知使用者這是一份經過美化的表格。

    6. 在標題後面新增 CSS 樣式設定：

      • 輸入一段樣式設定內容，這部分會以 style 區塊呈現。
      • 在這段樣式中，首先針對表格設定樣式：將表格的邊框設定為合併（即將相鄰儲存格的邊框合併成一條），並設定表格寬度為 60%，同時用 margin 屬性設定適當的上下間距以及自動置中。
      • 接著對所有的表頭和儲存格設定邊框，設定邊框為 1 像素的實線，顏色為深色（例如 #333）；再設定儲存格的內距為 10 像素，並且文字置中。
      • 最後，特別為表頭設定一個背景顏色（例如淡灰色），使其與其他儲存格區分開來。

    7. head 區塊的所有內容輸入完畢後，輸入「</head>」結束這部分。

    8. 在 head 區塊之後，建立文件主要內容區塊：輸入「<body>」，待所有內容輸入完畢後，再輸入「</body>」。

    9. 在 body 區塊中建立表格：

      • 輸入「<table>」開始建立表格。
      • 第一行作為表頭，輸入一個新的列開始標記（例如輸入「<tr>」），在這一列內依序輸入代表欄位標題的儲存格，這裡用表頭標籤填入「姓名」與「年齡」，然後輸入結束列的標記（「</tr>」）。
      • 接下來輸入第一筆資料列：開始一列後，依序輸入代表資料的儲存格，第一筆資料為「小明」與「18」，結束這一列。
      • 再輸入第二筆資料列，方法同上，分別填入「小華」與「20」，並結束該列。

    10. 完成所有表格資料輸入後，輸入「</table>」結束表格部分。

    11. 隨後輸入「</body>」結束 body 區塊。

    12. 最後，輸入「</html>」結束整個 HTML 文件的編寫。

    以上便是一份加入美化效果後的 HTML 表格文件的詳細輸入流程。



    進階表格應用1

    See the Pen Tangram Memory Game by 01 Scratchinai (@01-Scratchinai) on CodePen.


    進階表格應用2

    See the Pen Pokemon Card Holo Effect by 01 Scratchinai (@01-Scratchinai) on CodePen.