jadual tetapan css

CSS ialah bahasa yang digunakan untuk mengawal gaya halaman web Ia boleh menukar pelbagai elemen seperti warna, fon, reka letak, dan lain-lain dalam halaman web. Jadual ialah salah satu elemen yang paling biasa dalam reka bentuk web dan CSS menyediakan cara yang fleksibel untuk membantu kami menetapkan gaya yang tepat untuk jadual.

Berikut ialah contoh:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>31</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Gayakan jadual melalui CSS:

/* 表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 宽度自适应 */
  margin: 20px 0; /* 留出一定的边距 */
  font-size: 16px; /* 字体大小 */
}

/* 表头样式 */
thead {
  background-color: #f2f2f2; /* 背景颜色 */
  font-weight: bold; /* 字体加粗 */
}

/* 表格单元格样式 */
td, th {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文字对齐方式 */
  width: 33.33%; /* 列宽自动平均分配 */
}

/* 鼠标悬浮样式 */
tr:hover {
  background-color: #f5f5f5; /* 背景颜色 */
}

Dengan kod CSS di atas, kami menetapkan beberapa gaya asas untuk jadual:

• Gabungkan sempadan jadual untuk menjadikan jadual kelihatan lebih kemas dan lebih cantik; sel Sempadan grid, padding dan ketinggian baris menjadikan jadual lebih mudah dibaca dan difahami;
• Selain gaya asas di atas, CSS juga menyediakan lebih banyak gaya yang boleh digunakan untuk reka bentuk dan susun atur meja, yang boleh dipilih dan digunakan mengikut keperluan anda sendiri.
• Ringkasnya, CSS ialah salah satu alatan penting untuk reka bentuk web Kecekapan dalam sintaks asas dan sifat biasa CSS adalah penting untuk mereka bentuk jadual yang cantik, mudah dibaca dan boleh difahami.

Atas ialah kandungan terperinci jadual tetapan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!