[必學]6行CSS畫出部落格表格

很多新手部落客或新手做網頁設計時,有時想畫出一個「基本表格」但又一時畫不出時,就會使用該部落格平台或網頁編輯軟體內建的表格編輯器(有些是沒有內建的),但這編輯器產生的表格有時卻含雜了很多的不必要的語法標籤,讓整個表格的原始碼看起來又長又亂的……

如果你只是想要一個很基本的表格,不妨參考下列的語法,語法分成二段,一段是「CSS樣式 」語法,用來定義這個表格的框線、顏色等等;另一段是表格的原始「Html」語法這兩段要一起使用

▼表格的CSS樣式

<style>
.mytable {
    border: 1px solid #AAAAAA;}
.mytable tr th {
    border: 1px solid #AAAAAA;}
.mytable tr td {
    border: 1px solid #AAAAAA;}
</style>
 

▼表格的html碼

<table>
    <tbody>
        <tr>
            <th>
                日期
            </th>
            <th>

                事項
            </th>
        </tr>
        <tr>
            <td>
                2016/9/14
            </td>
            <td>

                莫蘭蒂颱風來襲
            </td>
        </tr>
        <tr>
            <td>
                2016/9/15
            </td>
            <td>

                中秋節烤肉
            </td>
        </tr>
        <tr>

            <td>
                2016/9/16
            </td>
            <td>

                又來另一個颱風
            </td>
        </tr>
    </tbody>
</table>

 

上述兩段的語法,你複製到到你的部落格文字編輯區,並把文字編輯區轉成「html原始碼」介面,再貼上這兩段語法即可,

這邊要注意一下,貼上語法時再加替表格的<th>標籤設一下寬度則表格下方所有欄位就會自動固定成你要的寬度了,要設成%或px 都可以,加上『style="XXXXXX"』見下圖:

另可以在<table>標籤這邊也加上一個80%的設定,讓它繼承上面網頁寬度的80%後,再讓下面的<th>來瓜分這個寬度。

160915%e5%af%ab%e9%83%a8%e8%90%bd%e6%a0%bc%e7%9a%84%e5%bf%ab%e9%80%9f%e7%94%a2%e7%94%9f%e8%a1%a8%e6%a0%bc%e8%aa%9e%e6%b3%952

▼成果如下表:

日期 事項
2016/9/14 莫蘭蒂颱來襲
2016/9/15 中秋節烤肉
2016/9/16 又來另一個颱風

 

以上就得到一個很基本的表格了,如果想增加行、列,就再把文字編輯區轉回hml介面,並複製『th、tr、td』標籤碼往下再貼上即可;
若要把表格增加一些背景、框線、字體變化,可以在CSS語法中自行加入,這一部分就請上網查詢相關的CSS語法了。

 

FACY

我是小訣行銷工作室的Facy,這是我第二個網站專寫用來寫文章的,我喜歡寫部落格來記錄「把不會變會」的事,也喜歡教別人寫部落格,更有替人架設部落格網站的服務(就像本站)。
專長是WordPress客製化架站,且凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客網站接案製作架站教學,歡迎找我聊聊。

  • 如果您不用寫程式就能架站有興趣的話,可以加入FB社團一起交流。
  • 如果您需要更系統性的學習WordPress,歡迎參考我的線上課程或報名一對一家教班,或公開班(不定時配合開課單位開課)。
  • 如果您想當部落客且想要自架部落格網站且有自己網址,我也能替您服務或顧問式輔導架站
  • 架設網站請找我,點此看作品
0 0 vote
為本文評分
訂閱
通知
guest
0 Comments
Inline Feedbacks
查看所有評論

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

站內搜尋

訂閱本站

如果您想收到新文章的通知,可以留下您的Email

我保證不會亂寄廣告信給你!

小訣行銷工作室

如果需要架站(包含像本站類型部落格網站)、網頁設計教學服務、業配需求,歡迎參考小訣行銷工作室

贊助與鼓勵

您好,

如果我的網路筆記剛好有幫到您,不妨請我喝杯咖啡吧!😊