切換
舊版
前往
大廳
主題

Html 網頁 #12 我要表格

CW | 2020-05-22 04:20:05 | 巴幣 2 | 人氣 226

我要表格
(建議以電腦閱讀此篇)

表格有兩種編寫方式,不過格式上大同小異。

簡單版:
<table>
<tr>
<td>第 1 行,第 1 欄</td>
<td>第 1 行,第 2 欄</td>
<td>第 1 行,第 3 欄</td>
</tr>
<
tr>
<td>第 2 行,第 1 欄</td>
<td>第 2 行,第 2 欄</td>
<td>第 2 行,第 3 欄</td>
</tr>
</table>

進階版:
<table border="1">
<thead>
<tr>
<th>項目</th>
<th>收入</th>
<th>支出</th>
</tr>
</thead>
<tfoot>
<tr>
<td>總計</td>
<td></td>
<td>150</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>零用錢</td>
<td>500</td>
<td></td>
</tr>
<tr>
<td>課本</td>
<td></td>
<td>-250</td>
</tr>
<tr>
<td>文具</td>
<td></td>
<td>-100</td>
</tr>
</tbody>
</table>
實際效果:
項目 收入 支出
零用錢   500
     
課本
-250
文具
-100
總計       150

<tr>:一個橫排
<td>:一個橫排裡面,有幾個格子

table 屬性:
<table width="80%" border="1" cellspacing="1" cellpadding="1">...</table>
width  = 表格寬度
border = 邊框
cellspacing = 間距
cellpadding = 內距

td 屬性:
<td colspan="2" rowspan="3">...</td>
colspan = 水平合併
rowspan = 垂直合併





如果有錯誤,歡迎在下方留言討論喔 ~
送禮物贊助創作者 !
0
留言

創作回應

蒼曜
colspan是跨列水平合併,rowspan是跨行垂直合併,兩者的解釋感覺要對調
2020-05-23 01:35:07
CW
感謝提醒,加上圖片說明~
2020-05-23 11:39:53

相關創作

更多創作