html5中table的意思是什麼-html教學-PHP中文網

首頁

web前端

html教學

html5中table的意思是什麼

醉折花枝作酒筹

Jun 07, 2021 am 11:17 AM

html table

在html中，table是表格，文法格式為「
表格內容
」。一個簡單的HTML表格包括table元素，一個或多個tr、th以及td元素；tr元素定義表格行，th元素定義表頭，td元素定義表格單元。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

簡單的HTML表格是由table標籤以及一個或多個tr，th，td元素組成。

table標籤

table標籤可以定義簡單的表格，它主要是用來控製表格的外邊框的，它擁有margin屬性主要是設定表格的外邊距。 border屬性用於設定表格的邊框以及cellspacing屬性用於規定單元格之間的空白

#tr部分：

tr是主要用來分割表格中有幾行，一般只需要用來設定heigth

#td部分：

td是用來控制每個單元格的屬性，可是分別控制每個單元格的上下左右邊框，其中也包含padding屬性。

th部分：

th的用法與td的用法相同，只是它是用來區分錶頭的。

注意：在表格中國使用百分比和使用像素為單位是相同的

範例：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>NUMBER</th>
      </tr>
      <tr>
        <td>xm</td>
        <td>10</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>xh</td>
        <td>3</td>
        <td>2021</td>
      </tr>
      <tr>
        <td>xf</td>
        <td>4</td>
        <td>2010</td>
      </tr>
    </table>
  </body>
</html>

登入後複製

　　效果圖：

html5中table的意思是什麼

#表格的跨行與跨列處理

我們也可以透過設定儲存格的colspan屬性使其跨列合併，也可以設定儲存格的rowspan屬性使其跨行合併，如下所示

實例：

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>NAME</th>
        <th>AGE</th>
        <th>NUMBER</th>
      </tr>
      <tr>
        <td rowspan="2">xm</td>
        <td>10</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>3</td>
        <td>2021</td>
      </tr>
      <tr>
        <td>xf</td>
        <td>4</td>
        <td>2010</td>
      </tr>
    </table>
  </body>
</html>

登入後複製

結果：

html5中table的意思是什麼