上HTML5教學的必經之路2:深入挖掘HTML表格標籤

​

​

​


因為今天的HTML5教學,我終於可以用好好將之與網路行銷課程雙向使用!太值得了!

表格標籤<Table >指令一覽表

HTML5教學基礎篇2-如何使用HTML5做表格?

許多網頁的表格都是使用jpg等圖片來表示，但在之前的網路行銷課程已提到：圖片的表現方式對於SEO優化的效果較弱，因為Google等搜尋引擎是認字勝過於認圖片！若你希望你的網站兼顧美觀與SEO優化效果，那你一定要學會辨認HTML5教學的表格標籤，如此一來，便能與之前上過的網路行銷課程配合應用。

在網頁中除了項目清單標籤：無照順序排列的<ul>和有照順序排列的<ol>，還有可以按照階層排列的<dl>之外，還有更複雜的表格標籤。(起始標為<table></table>)。

​

由此可以看得出表格標記<th>、<tr>、<td>之間的關係以及設定的方式。同時在每一個標記之內還可以使用其他的標記，做更細部的設定。如圖中的<td>標籤就加入了<width>標籤來設定寬度，是為<td width=100>。表格標籤的常用屬性如下所示：

<align> 設定整張表格在網頁的對齊方式，有左 (left)、中 (center)、右 (right)

<bgcolor> 設定表格的背景色。以 #rrggbb 為色彩格式

<border> 設定表格的邊框寬度，以像素為單位

<cellpadding> 設定表格邊框與內容中間的留白要留多少，以像素為單位

<cellspacing> 設定格子與格子中間的空白。

<width> 設定表格的寬度，以像素為單位。

以上是針對整個表格的<table>屬性。

至於<td><tr>也有相應的屬性設定如下：

<align> 對齊儲存格的內容，有靠左 (left)、靠中 (center)、靠右 (right)、還有分散對齊 (justify)，這樣每行都可以有相等的長度（就像在報紙和雜誌中）、將內容對準指定字 (char)

<bgcolor> 設定儲存格的背景色。以 #rrggbb 為色彩格式

<colspan> 合併橫向的儲存格，數字以欲合併的格數為單位

<rowspan> 合併直向的儲存格，數字以欲合併的格數為單位

<height> 設定儲存格高度。

<width> 設定儲存格寬度。

<rowrap> 限制儲存格的內容不能換列，也許可以維持美觀，但是會犧牲多出來的文字內容。

<valign> 儲存格內容的字對齊，有靠上對齊 (lop)、靠中對齊 (middle)、靠下對齊 (bottom)。不過，如果文的字體不相同，baseline 的效果會最好！


相關連結：

上HTML5教學的必經之路1:先掌握初學者的敲門磚!

上HTML5教學的必經之路3:標籤演變過程你要趕上呀!

三秒內就能下單的世代,網路行銷課程你絕對不能不上!!!!

早知道畢業前就去上達內Java課程了 早點就業 少些迷惘

想轉換新跑道嗎?來達內教育練功六個月, 馬上成為IT人才

台積電董事長都說了:AI和網路行銷課程很重要!

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？