菜鳥網頁基礎 DAY16

第 12 屆 iThome 鐵人賽

DAY 16

Modern Web

菜鳥網頁基礎系列第 16 篇

12th鐵人賽

小徐

團隊教練我想寫code

2020-10-01 19:17:08

569 瀏覽

這篇我們要來了解表格，有些人會拿表格來製作網頁，但是這樣其實是不太OK的，表格不好調整而且也不能拿來做 RWD，所以要排版的話就使用 div 來做排版，那接下來就來認識表格的標籤ㄅ。

我們在寫表格的時候最外面會先使用 <table> 標籤，他代表一整張表，之後我們要開始往裡面看，我們會先從橫排開始看起橫排我們使用的標籤叫做 <tr>，之後開始看起裡面的格子，裡面的格子叫做<td>，所以順序是 table > tr > td。

  <body>
    <table>
      <tr>
        <th>商品</th>
        <th>數量</th>
        <th>價錢</th>
        <th>商品介紹</th>
      </tr>
      <tr>
        <td>西瓜</td>
        <td>2</td>
        <td>100</td>
        <td>文字</td>
      </tr>
 
      <tr>
        <td>商品</td>
        <td>2</td>
        <td>200</td>
        <td>文字</td>
      </tr>
 
      <tr>
        <td>商品</td>
        <td>10</td>
        <td>300</td>
        <td>文字</td>
      </tr>
 
      <tr>
        <td>商品</td>
        <td>5</td>
        <td>400</td>
        <td>文字</td>
      </tr>
    </table>
  </body>

這是呈現出來的畫面，等等我要給他外框

這是給他外框後

table,
td,
th {
    border: 1px solid black;
}

但是這樣雙線稍微不太好看，所以我們要把它合併

table,
td,
th {
    border: 1px solid black;
    border-collapse: collapse;
	 /* 他可以把框線合併成一條 */
}

那我們可以給他一些空間，讓他們比較舒服，然後幫他們置中，給價錢一些單位。

這樣看起來是不是好多了

td,
th {
    padding: 10px 25px;
    /* 給他們空間留白 */
    text-align: center;
    /* 這是置中 */
}
 
.price:before {
    content: "$ ";
    /* :before 可以在前面加上一些東西 */
}
 
.price:after {
    content: " NTD";
    /* :after 可以在後面加上一些東西 */
}

表格也可以合併，可以橫的跟直的

上圖是原本圖表

上圖是直的合併後

我們使用了 rowspan="3" 裡面寫多少他就會合併多少

接下來是橫著合併，我們要把商品介紹合併掉，那我們要先把位置讓出來才能合併，所以我要把 th 拿掉一個。

我們使用 colspan="2"，讓他向右合併

最後的程式碼，可以對照一下

<body>
  <table>
    <tr>
      <th>商品</th>
      <th>數量</th>
      <th colspan="2">價錢</th>
      <!-- 向右合併 -->
    </tr>
    <tr>
      <td>西瓜</td>
      <td>2</td>
      <td class="price">100</td>
      <td rowspan="4">文字</td>
      <!-- rowspan="4" 如果寫3他就會合併3格 -->
    </tr>
 
    <tr>
      <td>商品</td>
      <td>2</td>
      <td class="price">200</td>
 
    </tr>
 
    <tr>
      <td>商品</td>
      <td>10</td>
      <td class="price">300</td>
 
    </tr>
 
    <tr>
      <td>商品</td>
      <td>5</td>
      <td class="price">400</td>
 
    </tr>
  </table>
</body>