[必學]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>來瓜分這個寬度。

▼成果如下表:

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