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

1 Star2 Stars3 Stars4 Stars5 Stars (本文對您有幫助嗎?)
Loading...

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

如果你只是想要一個很基本的表格,不妨參考下列的語法,語法分成二段,一段是「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"』見下圖:

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%9511

另可以在<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語法了。

 

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *