跳到主要內容

用 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樣式就會應用到表格上。你可以根據需要調整樣式和內容。 

這個網誌中的熱門文章

怎麼設計文字為斜體字?用 CSS font-style 設計

回想以前在設計 HTML 網頁的時候,我們常常會用 i tag 幫文字增加斜體效果,可是在 CSS 設計的規則下,不應該使用 i tag 來增加斜體效果,應該改用 font-style 來設計,馬上寫個簡單的斜體字範例給各位瞧瞧 <i>這是 HTML 的斜體字</i> <span style="font-style:italic;">這是 CSS 的斜體字</span> 效果展現 這是 HTML 的斜體字 這是 CSS 的斜體字

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

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

史帝芬金之惡夢工廠 Dolan's Cadillac 電影欣賞心得

史蒂芬金之惡夢工廠這部電影哪一部2009年的電影,算是有點年份了,這部電影其實是改編日史蒂芬金的一篇短篇小說《多蘭的凱迪拉克》電影中有一個人口販子(中文可能翻譯為杜雷或多蘭),他是個大壞蛋,他的座車就是一輛凱迪拉克suv防彈車,畢竟要做人口販子這種事情,難免會遇上仇家,防彈車是絕對少不了的配備。