首頁 > 文章 > web前端 > 使用 CSS 設定表格樣式

使用 CSS 設定表格樣式

PHPz轉載: 2023-08-19 14:29:04768瀏覽

我們可以使用CSS來定義表格的樣式。以下屬性用於為f5d188ed2c074f8b944552db028f98a1及其元素定義樣式：

border
CSS的border屬性用於定義邊框寬度、邊框樣式和邊框顏色。
border-collapse
此屬性用於指定f5d188ed2c074f8b944552db028f98a1元素是否應具有共享或獨立的邊框。
caption
caption-side屬性用於垂直定位表格標題框。
empty-cells
此屬性用於指定表格的空白儲存格的顯示方式。
table-layout用於定義瀏覽器在佈局表格的行、列和單元格時所使用的演算法。

範例

以下範例示範了表格的樣式：

即時示範

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: &#39;Bookman Old Style&#39;, serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>

Output

This gives the following output −

Styling Tables Working with CSS

#Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

Output

#This gives the following output −

Styling Tables Working with CSS

以上是使用 CSS 設定表格樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css border table 算法

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：重設 CSS 和規範化 CSS 之間的差異？下一篇：重設 CSS 和規範化 CSS 之間的差異？

看更多