本文教你如何在 Markdown 插入用 CSS+DIV 做的 Table

DIV 不可以這樣寫喔，不然得不到想要的結果

<div id="css_table">
    <div class="css_tr">
        <div class="css_td">一</div>
        <div class="css_td">二</div>
        <div class="css_td">三</div>
    </div>
    <div class="css_tr">
        <div class="css_td">4</div>
        <div class="css_td">5</div>
        <div class="css_td">6</div>
    </div>
    <div class="css_tr">
        <div class="css_td">Seven</div>
        <div class="css_td">Eight</div>
        <div class="css_td">Nine</div>
    </div>
</div>

輸出，看吧，說有多醜就有多醜，It’s ugly. 上下列竟然有空列隔開。

DIV 要這樣寫喔，因為是 Markdown，

<div id="css_table">
    <div class="css_tr">
        <div class="css_td">一</div>
        <div class="css_td">二</div>
        <div class="css_td">三</div>
    </div><div class="css_tr">
        <div class="css_td">4</div>
        <div class="css_td">5</div>
        <div class="css_td">6</div>
    </div><div class="css_tr">
        <div class="css_td">Seven</div>
        <div class="css_td">Eight</div>
        <div class="css_td">Nine</div>
    </div>
</div>

輸出，終於正常了

把以下 table.css 放入 Hexo\themes\landscape\source\css 資料夾內

#css_table {
  display: table;
  border-collapse: collapse;
}
.css_tr {
    display: table-row;
}
.css_td {
    display: table-cell;
    border: 1px solid white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

把以下 link 插入 Hexo\themes\landscape\layout\index.ejs 檔案內

<link rel="stylesheet" href="/css/table.css"/>

恭喜完成！得到一個白邊表格。

進階表格

<div class="css_table">
<div class="css_caption">
    <p>This is a Table</p>
</div>    <div class="css_head">
    <div class="css_td">css_head 1
    </div>    <div class="css_td">css_head 2
    </div>    <div class="css_td">css_head 3
    </div>
</div>    <div class="css_tr">    
    <div class="css_td">Row 1 Column 1
    </div>    <div class="css_td">Row 1 Column 2
    </div>    <div class="css_td">Row 1 Column 3
    </div>
</div>    <div class="css_tr">
    <div class="css_td">Row 2 Column 1
    </div>    <div class="css_td">Row 2 Column 2
    </div>    <div class="css_td">Row 2 Column 3
    </div>
</div>

輸出