前端之旅

當有很多選項時，

表格是個不錯的呈現方式。

以水果來作範例。

HTML為：

<table>
                  <tr>
                    <th>項目</th>
                    <th>第一天</th>
                    <th>第二天</th>
                    <th>第三天</th>
                </tr>
                <tr>
                    <td>蘋果</td>
                    <td>10</td>
                    <td>42</td>
                     <td>2</td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td>26</td>
                    <td>58</td>
                     <td>26</td>
                </tr>
                <tr>
                    <td>橘子</td>
                    <td>36</td>
                    <td>70</td>
                     <td>12</td>
                </tr>
                <tr>
                    <td>柳丁</td>
                    <td>12</td>
                    <td>2</td>
                     <td>2</td>
                </tr>
                <tr>
                    <td>草莓</td>
                    <td>5</td>
                    <td>26</td>
                     <td>6</td>
                </tr>
            </table>

CSS為：

table, th, td {
    border: 1px solid rgba(208, 166, 166, 0.78);
}

td {
    text-align: center;
    font-size: 16px;
    padding: 4px 3px 3px 4px;
}

th {
    background: #F3DDDD;
    text-align: center;
    font-size: 18px;
}