在 Web 開發的早期,HTML 表格非常簡單,缺乏廣泛的樣式選項。然而,如今,大多數表格的樣式都旨在為用戶創造更美觀和實用的體驗。
CSS 提供了一組表格樣式屬性。除其他外,這些屬性允許您分隔表格單元格、指定表格邊框以及指定表格寬度和高度。
本教程將通過示例說明如何使用 CSS 設置表格樣式.在本教程結束時,您將成為專家。
HTML 表格
HTML 代碼定義了表格的結構。使用
標籤來定義一個表格。 、 和 | 標記分別指定行、表格標題和內容單元格。
讓我們看一個示例 HTML 表格。在下面的示例中,我們有一個表格列出了 2020 年 3 月 23 日這一周在紐約時報暢銷書排行榜上的前五本書:
我們表格的代碼如下:
這個表三列六行,包括一行`on
表格 CSSCSS 用於設置表格樣式。儘管上表以有組織的方式顯示了數據,但它是用純 HTML 編寫的(沒有樣式)。通過使用 CSS,您可以使表格看起來更好。
在我們的代碼中,我們定義了一個純黑色邊框,1 像素寬。這是我們代碼的結果: 請注意,我們的表格包含 double邊框這是因為我們為表格本身( )、它的標題()和它的單元格( | )應用了邊框。雙邊框到單邊框,我們可以使用border-collapse屬性。
border-collapse 屬性將表格的雙邊框轉換為單邊框。border-collapse 屬性的默認值是折疊。如果屬性border-collapse 接收到值 collapse ,數組周圍的邊框將被折疊。
下面是 b 命令折疊屬性的示例:
我們的代碼返回: 我們的表格和它的內容現在有一個單一的邊框。
Border Spac eng 您可以使用border-spacing 屬性來定義表格中單元格之間的間距。border-spacing 屬性定義了之間的水平和垂直間距單元格 - 它按此順序執行。
這是一個在我們的初始表格(沒有折疊邊框的表格)上使用邊框間距屬性的示例: 我們的代碼返回: 我們的每個單元格在水平方向上都有 10px 的間距,並且垂直邊框。
寬度和高度 您可以使用寬度和高度屬性指定表格的寬度和高度及其屬性。
假設我們希望我們上面的表格(邊框折疊的那個)的寬度是網頁本身的寬度,並且假設我們希望每個表格標題的高度必須是 30 像素高。我們可以這樣做使用以下 CSS 代碼:
我們的代碼返回: 如您所見,我們的表格現在的寬度為網頁。此外,我們表格中的列標題是 30 像素高。
Padding 您可以使用 padding 屬性在邊緣之間添加一些空間表格中的單元格和這些單元格的內容。padding 屬性可用於 | 和 | 標籤。
假設我們要在單元格周圍添加 10px 的填充我們表格的內容,包括標題單元格。我們可以使用以下代碼:
我們的代碼返回: 現在每一行的內容和我們的 headers 表所有邊緣都有 10px 的填充。
水平文本對齊 您可以使用 text-align 屬性對齊存儲在 或 中的文本一個數組。默認情況下, | 元素居中對齊, | 元素左對齊。
文本對齊屬性最常用的值是:< br> - left、center、right(除 Microsoft Edge 和 Internet Explorer 外的所有瀏覽器都支持)
- start 和 end(除 Microsoft Edge 和 Internet Explorer 外的所有瀏覽器都支持)
假設我們要將數組中的 | 元素居中並將 | 元素對齊到每個單元格的左側。我們可以使用以下代碼: 我們的代碼返回: 在這個例子中,我們將單元格外的文本居中。單元格d `header和header單元格文本左對齊
文本垂直對齊 CSSvertical-align屬性用於指定 | 或 | 標籤。默認情況下,垂直對齊屬性的值設置為 middle ,表示內容在單元格中心垂直對齊。
假設我們要將單元格 | 中的文本對齊到單元格的底部。我們使用以下代碼來做到這一點: 我們的代碼返回: ![Scre in Shot 2020 03 24 to 10.05.40]() | | |