本文教你如何在 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>

輸出

因為想要製作反白顯示答案的互動效果，所以需要把文字標記成白色。
所以Google了”Markdown 文字顏色”
前八個都說 Markdown 無法修改文字顏色，有一個說要用CSS
我想說不可能
最後在第九個找到答案

<font color="white">要反白的文字<font>

感謝收看