樣式基礎二

表格樣式

表格是用<table></table>標籤定義，其中的標籤定義如下：

  • <tr>: 表格列
  • <th>: 表格標題，預設為粗體和居中
  • <td>: 表格單元格

表格預設顯示為無邊框，可以透過CSS樣式的 border屬性來設置邊框

<style>
  table, th, td {
    /* 1px 寬度的黑線 */
    border: 1px solid black;
  }

  table {
    /* 將表格邊框折疊為單個邊框 */
    border-collapse: collapse;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>身高</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>170</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>160</td>
  </tr>
</table>
姓名 身高
小明 170
小王 160

橫格線表格

<style>
  table {
    border-collapse: collapse;
    width: 200px;
  }

  th, td {
    text-align: center;
    padding: 5px;
    border-bottom: 1px solid darkgray;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>身高</th>
    <th>體重</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>170</td>
    <td>70</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>160</td>
    <td>60</td>
  </tr>
</table>
姓名 身高 體重
小明 170 70
小王 160 60

橫條紋表格

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    overflow-x:auto;
  }

  th, td {
    text-align: center;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>身高</th>
    <th>體重</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>170</td>
    <td>70</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>160</td>
    <td>60</td>
  </tr>
  <tr>
    <td>小新</td>
    <td>175</td>
    <td>75</td>
  </tr>
</table>
姓名 身高 體重
小明 170 70
小王 160 60
小新 175 75

表格的水平滾動軸

如果屏幕太小而無法顯示全部內容時，則響應表格將顯示水平滾動軸：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    text-align: center;
    padding: 5px;
    white-space:nowrap;
  }
</style>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>姓名</th>
      <th>身高</th>
      <th>體重</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
      <th>其他</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>170</td>
      <td>70</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>小王</td>
      <td>160</td>
      <td>60</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>小新</td>
      <td>175</td>
      <td>75</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
  </table>
</div>
姓名 身高 體重 其他 其他 其他 其他 其他 其他 其他 其他 其他 其他
小明 170 70 50 50 50 50 50 50 50 50 50 50
小王 160 60 50 50 50 50 50 50 50 50 50 50
小新 175 75 50 50 50 50 50 50 50 50 50 50

Bootstrap 表格

請在<head>中加上

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

橫格線表格

<div class="container">
<table class="table table-striped" style="width:50%">
  <tr>
    <th>姓名</th>
    <th>身高</th>
    <th>體重</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>170</td>
    <td>70</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>160</td>
    <td>60</td>
  </tr>
</table>
</div>
姓名 身高 體重
小明 170 70
小王 160 60

深色表格

<div class="container">
<table class="table table-dark" style="width:50%">
  <tr>
    <th>姓名</th>
    <th>身高</th>
    <th>體重</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>170</td>
    <td>70</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>160</td>
    <td>60</td>
  </tr>
  <tr>
    <td>小新</td>
    <td>175</td>
    <td>75</td>
  </tr>
</table>
</div>
姓名 身高 體重
小明 170 70
小王 160 60
小新 175 75

清單樣式

改變清單項目標記

list-style-type屬性可以指定清單項目標記的類型：

<style>
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}
</style>

<ul class="a">
  <li>項目一</li>
  <li>項目二</li>
</ul>

<ul class="b">
  <li>項目一</li>
  <li>項目二</li>
</ul>
  • 項目一
  • 項目二
  • 項目一
  • 項目二

改變清單項目標記為圖像

list-style-image屬性可以將圖像指定清單項目標記：

<style>
ul {
  list-style-image: url('squre.gif');
}

<ul>
  <li>項目一</li>
  <li>項目二</li>
</ul>
  • 項目一
  • 項目二

其他參考資料

🏠