html裡table是什麼-html教學-PHP中文網

html裡table是什麼

清浅

發布： 2019-03-12 13:41:58

原創

16985 人瀏覽過

HTML中的table標籤是用來定義表格的，它與一個或多個tr，th，td元素共同構成html表格，在table表格裡可以給它設定邊框以及間距等

在HTML中可以透過table標籤用於定義html表格，接下來在文章中將為大家具體介紹table標籤，具有一定的參考作用希望對大家有所幫助。

html裡table是什麼

【推薦課程：HTML教學】

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

table標籤

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

tr部分：

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

td部分：

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

th部分：

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

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

#範例：

<table border="1px solid #ccc">
        <h4>php中文网</h4>
     <tr>
        <td>教程</td>
        <td>教程地址</td>
   </tr>
   <tr>
        <td>php教程</td>
        <td>//m.sbmmt.com</td>
          
   </tr>
   <tr>
        <td>html教程</td>
        <td>//m.sbmmt.com</td>
            
    </tr>
    </table>

登入後複製

效果圖：

html裡table是什麼

表格的跨行與跨列處理

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

單元格跨兩列

 <tr>
        <td colspan="2">php教程</td>
        <td>//m.sbmmt.com</td>
          
   </tr>
   <tr>
        <td colspan="2">html教程</td>
        <td>//m.sbmmt.com</td>
            
    </tr>
     <tr>
        <td colspan="2">css教程</td>
        <td>//m.sbmmt.com</td>    
   </tr>

登入後複製

效果圖如下：

html裡table是什麼

單元格跨兩行

 <tr>
        <td  rowspan="2">教程</td>
        <td>教程地址</td>
   </tr>

登入後複製

效果圖如下：

Image 021.png

邊框設定

在預設情況下table 是沒有邊框的，只有為table標籤設定border 屬性後才會顯示邊框，但這種邊框因為有間距所以看起來是比較難看的，因此我們可以透過collapse屬性來去除邊框間距

例：

<table border="1" style="border-collapse:collapse">
 </table>

登入後複製

效果圖如下：

Image 022.png

注意：在table中，width指的是整個表格的寬度，而td的width值得指內部不包括內容content的寬度

###總結：以上就是本篇文章的全部內容了，希望對大家學習table標籤有所幫助。 ###

以上是html裡table是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！