close

HTML5教學小撇步二-HTML表格原來是這樣做!!

 

HTML5教學小撇步第二篇!! 你知道原來HTML也可以用來製作表格嗎? 想知道怎麼做就快往下看吧!! 很簡單的~

 

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

 

HTML5教學基礎篇2-如何使用HTML5做表格?許多網頁的表格都是使用jpg等圖片來表示,但是圖片的表現方式對於SEO優化的效果較弱,因為Google等搜尋引擎是認字勝過於認圖片!若你希望你的網站兼顧美觀與網路行銷課程必學的SEO優化效果,那你一定要學會辨認HTML5的表格標籤

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

HTML5教學小撇步二-HTML表格原來是這樣做!!

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

<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教學小撇步一-用免費的編輯器寫HTML!!

 

HTML5教學小撇步三-HTML新增的標籤原來有這些~

 

電腦不只會選花生,還會養蝦!!!! 人工智慧養出來的蝦還比較大隻呢!!

 

IT人想結合程式語言與醫療,Python課程準沒錯!!

 

大企業紛紛投入AI,想從事相關行業嗎? Python課程開始吧!! ()

 

中國IT教育領導品牌 達內教育集團第一家海外授權中心

 

美國NASDAQ上市公司、外商IT教育培訓企業

arrow
arrow
    創作者介紹
    創作者 Java瑪奇朵 的頭像
    Java瑪奇朵

    Java瑪奇朵-非本科系的IT吃喝電玩日誌

    Java瑪奇朵 發表在 痞客邦 留言(0) 人氣()