前端基礎-HTML表格

• 2020 年 4 月 7 日
• 筆記

表格

導入：我們在博學谷上面可以看到各自班級的課程表

這樣的頁面就會用到表格。表格在網站中應用常用場景通常是金融類的網站，數據做統計，後台管理系統等

1.相關標籤

畫圖說明，table是一個表格的模組，裡面有行，光有行不行，裡面要有列，在html中不叫列，叫單元格，再有很多行，就組成了表格——-》table標籤包含行tr—》再包含單元格td

表格：<table></table>

行：<tr></tr>

單元格：<td></td>

每列的標題：<th></th>

表格標題：<caption></caption>

小案例：

<!-- 表格的區域,border屬性代表邊框的意思 -->  <table border="1">  	<!-- 行 -->  	<tr>      	<!-- 單元格 -->          <td>姓名</td>          <td>性別</td>          <td>年齡</td>      </tr>      <tr>      	<!-- 單元格 -->          <td>令狐沖</td>          <td>男</td>          <td>22</td>      </tr>      <tr>      	<!-- 單元格 -->          <td>任盈盈</td>          <td>女</td>          <td>18</td>      </tr>      <tr>      	<!-- 單元格 -->          <td>任我行</td>          <td>男</td>          <td>55</td>      </tr>      <tr>      	<!-- 單元格 -->          <td>岳不群</td>          <td>男</td>          <td>50</td>      </tr>  </table>

表格的邊框 語法

<table border=1>    </table>

注意：border這個屬性一定加在table標籤上，加在td上不生效

2.對齊方式

a) 水平對齊

語法：align="center/left/right"

b) 垂直對齊

語法：valign="top/middle/bottom"

3.單元格間距和填充

單元格間距（cellspacing）：單元格和單元格距離，默認是2像素

單元格填充（cellpadding）：單元格和內容的距離，默認是1像素

4.合併單元格

導入：最後兩行的最後兩個單元格為照片，需要合併起來，這種合併是上下合併，所以合併的是行。如果是左右合併，那就是合併的列

合併行(rowspan)：把不同的行合併起來，寫在上面的單元格上面

合併列(colspan)：把不同列合併起來，寫在左邊的單元格上面

取值是數值，需要合併幾個單元格就寫數字幾就行，一旦合併了單元格，就需要將多餘的單元格刪掉

程式碼

<table cellspacing="0" cellpading="30" border="1" width="300" height="200">  	<caption><h3>學生證</h3></caption>      <tr>      	<th align="center" colspan="4">深圳傳值黑馬程式設計師</th>      </tr>      <tr align="center">      	<td>姓名</td>      	<td>班級</td>      	<td>學號</td>      	<td rowspan="2">照片</td>      </tr>      <tr align="center">      	<td>曾真光</td>          <td>php14期</td>          <td>007</td>      </tr>  </table>

注意：合併以後一定要把多餘的單元格td刪掉