首页 > 優雅筆寄部落格 > 部落格語法 > [必學]6行CSS畫出部落格表格
2016
09-16

[必學]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"』見下圖:

[必學]6行CSS畫出部落格表格 - 第1张  | 優雅筆寄

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

[必學]6行CSS畫出部落格表格 - 第2张  | 優雅筆寄

▼成果如下表:

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

 

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

 

如果您喜歡這篇文章,請幫我們按個讚
 

 
最後编辑:
作者:今晚有風
盡量培養優雅的心境,事事優雅,事事無礙,就讓優雅成為人生的寫照唄!

我有話說