在做網路行銷?HTML5教學不可少(中):認識HTML表格標籤

在做網路行銷?HTML5教學不可少(中):認識HTML表格標籤

在做網路行銷?HTML5教學不可少(中):認識HTML表格標籤

 

上了HTML5教學才知道表格標籤怎麼用!天啊!它不僅美化我的網站資料,又方便到不行!!

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

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

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

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

HTML5教學-免費網頁編輯器Codepen|達內教育|網路行銷課程

由此可以看得出表格標記<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教學不可少(上):初學者的入門款

在做網路行銷?HTML5教學不可少(下):標籤的演變

不管你想賣什麼東西,先上網路行銷課程,保證讓你快速致富!

Python課程無疑是進入AI人工智慧的敲磚石!

學習Python課程還能救人命!AI與醫療的結合應用

掰掰悲催人生-達內教育先就業再付學費

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

本篇發表於 科技與人工智慧新知 並標籤為 , , , , , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料