跳到主要內容

用 css 設計一個 4x6 的表格的簡單方式

以下是一個簡單的CSS代碼片段,可以用來設計一個4x6的表格:

.table {
  border-collapse: collapse;
  width: 100%;
}

.table th, .table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

.table th {
  background-color: #f2f2f2;
}

.table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table tr:hover {
  background-color: #e5e5e5;
}

這個CSS樣式設計了一個簡單的表格,其中包含標題(th)和數據單元格(td)。表格的奇數行和偶數行有不同的底色,方便閱讀。當鼠標懸停在行上時,行的背景色會變化,提供一點視覺反饋。

在HTML文件中,你可以使用以下結構創建4x6的表格:

<table class="table">
  <thead>
    <tr>
      <th>標題1</th>
      <th>標題2</th>
      <th>標題3</th>
      <th>標題4</th>
      <th>標題5</th>
      <th>標題6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>數據1</td>
      <td>數據2</td>
      <td>數據3</td>
      <td>數據4</td>
      <td>數據5</td>
      <td>數據6</td>
    </tr>
    <!-- 添加更多行... -->
  </tbody>
</table>

這個HTML結構應該放在你的HTML文件中,這樣CSS樣式就會應用到表格上。你可以根據需要調整樣式和內容。 

這個網誌中的熱門文章

懂得藏拙的人才是真正的聰明人

一個懂得藏拙的人,才是真正厲害的人,首先,要會藏拙就要知道自己的不足在那裡,這樣代表你了解自己,同時也對自己誠實;有些人每天長篇大論,但是,卻一直將自己的缺點曝露在大家面前,這是因為他還沒停下思考,而把自己的缺點給大家看,這就是不懂得藏拙,就是會被人看透,如果還沾沾自喜,那就太膚淺了。

2014 狼人鎮 Wolves 比想像中好看

之前看到狼人鎮這部電影的預告,有產生一點興趣,不過因為個人比較喜歡看科幻電影,對於怪獸電影的喜歡程度沒有這麼高,尤其是看到狼人鎮裡面的狼人裝扮跟想像中的(如暮光之城)裡面的男人不太一樣,所以一直沒有去看這部電影,最近因為朋友邀約,所以一起看了這一步怪獸電影,發現比想像中的還要好看耶!

這是我的第一篇文章 140309

掀記錄一下這個部落格的第一篇文章,因為未來會有很多很多的分享,我希望在過幾年,回過頭來可以有個美好的開始,一個美好的回憶,今天是民國 103 年 3 月 9 日,星期天的晚上,就這樣開啟了這個部落格的序幕。