在 Web 開發的早期，HTML 表格非常簡單，缺乏廣泛的樣式選項。然而，如今，大多數表格的樣式都旨在為用戶創造更美觀和實用的體驗。
CSS 提供了一組表格樣式屬性。除其他外，這些屬性允許您分隔表格單元格、指定表格邊框以及指定表格寬度和高度。
本教程將通過示例說明如何使用 CSS 設置表格樣式.在本教程結束時，您將成為專家。
HTML 表格
HTML 代碼定義了表格的結構。使用
標籤來定義一個表格。 、| 和 | 標記分別指定行、表格標題和內容單元格。
讓我們看一個示例 HTML 表格。在下面的示例中，我們有一個表格列出了 2020 年 3 月 23 日這一周在紐約時報暢銷書排行榜上的前五本書：
![Screen Shot 2020 03 24 at 09.50.10 1]() 我們表格的代碼如下：
這個表三列六行，包括一行`on
表格 CSSCSS 用於設置表格樣式。儘管上表以有組織的方式顯示了數據，但它是用純 HTML 編寫的（沒有樣式）。通過使用 CSS，您可以使表格看起來更好。
在我們的代碼中，我們定義了一個純黑色邊框，1 像素寬。這是我們代碼的結果： ![Screen Shot 2020 03 24 at 09.53.50]() 請注意，我們的表格包含 double邊框這是因為我們為表格本身（ ）、它的標題（| ）和它的單元格（ | ）應用了邊框。雙邊框到單邊框，我們可以使用border-collapse屬性。
border-collapse 屬性將表格的雙邊框轉換為單邊框。border-collapse 屬性的默認值是折疊。如果屬性border-collapse 接收到值 collapse ，數組周圍的邊框將被折疊。
下面是 b 命令折疊屬性的示例：
我們的代碼返回： ![Screen Shot 2020 03 24 to 09.55.49]() 我們的表格和它的內容現在有一個單一的邊框。
Border Spac eng 您可以使用border-spacing 屬性來定義表格中單元格之間的間距。border-spacing 屬性定義了之間的水平和垂直間距單元格 - 它按此順序執行。
這是一個在我們的初始表格（沒有折疊邊框的表格）上使用邊框間距屬性的示例：
我們的代碼返回： ![Screen Shot 2020 03 24 At 09.58.18]() 我們的每個單元格在水平方向上都有 10px 的間距，並且垂直邊框。
寬度和高度 您可以使用寬度和高度屬性指定表格的寬度和高度及其屬性。
假設我們希望我們上面的表格（邊框折疊的那個）的寬度是網頁本身的寬度，並且假設我們希望每個表格標題的高度必須是 30 像素高。我們可以這樣做使用以下 CSS 代碼：
我們的代碼返回： ![Screen Shot 2020 03 24 at 10.00.26]() 如您所見，我們的表格現在的寬度為網頁。此外，我們表格中的列標題是 30 像素高。
Padding 您可以使用 padding 屬性在邊緣之間添加一些空間表格中的單元格和這些單元格的內容。padding 屬性可用於 | 和 | 標籤。
假設我們要在單元格周圍添加 10px 的填充我們表格的內容，包括標題單元格。我們可以使用以下代碼：
我們的代碼返回：  現在每一行的內容和我們的 headers 表所有邊緣都有 10px 的填充。
水平文本對齊 您可以使用 text-align 屬性對齊存儲在 或 | 中的文本一個數組。默認情況下， | 元素居中對齊， | 元素左對齊。
文本對齊屬性最常用的值是：< br> - left、center、right（除 Microsoft Edge 和 Internet Explorer 外的所有瀏覽器都支持）
- start 和 end（除 Microsoft Edge 和 Internet Explorer 外的所有瀏覽器都支持)
假設我們要將數組中的 | 元素居中並將 | 元素對齊到每個單元格的左側。我們可以使用以下代碼：
我們的代碼返回： ![Screen Shot 2020 03 24 至 10.03.04 “data-srcset = https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03-24-at-10.03.04 - 20x4.png? 有損 = 1 &; 條帶 = 1 & webp = 1 20w，https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03-24 - at- 10.03.04.jpg? 尺寸 = 234x46 & 有損 = 1 & 波段 = 1 & webp = 1,234w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot -2020-03-24-at -10.03.04-385x76.png? 有損 = 1 & 剝離 = 1 & webp = 1 385w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020 / 04 / Screen-Shot-2020- 03-24- at-10.03.04.jpg? 尺寸 = 468x92 & 有損 = 1 & 條帶 = 1 & webp = 1,468w, https://744025.smushcdn.com/1245953/ wp -content / uploads / 2020/04 / Screen-Shot-2020-03-24 -at-10.03.04.jpg? 有損 = 1 & strip = 1 & webp = 1736w]() 在這個例子中，我們將單元格外的文本居中。單元格d `header和header單元格文本左對齊
文本垂直對齊 CSSvertical-align屬性用於指定 或 標籤。默認情況下，垂直對齊屬性的值設置為 middle ，表示內容在單元格中心垂直對齊。
假設我們要將單元格 | 中的文本對齊到單元格的底部。我們使用以下代碼來做到這一點：
我們的代碼返回： ![Scre in Shot 2020 03 24 to 10.05.40]()
Shop
![]()
Learn programming in R: courses $
![]()
Best Python online courses for 2022 $
![]()
Best laptop for Fortnite $
![]()
Best laptop for Excel $
![]()
Best laptop for Solidworks $
![]()
Best laptop for Roblox $
![]()
Best computer for crypto mining $
Best laptop for Sims 4 $
Latest questions
NUMPYNUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPYNUMPY
How to convert Nonetype to int or string?
12 answers
NUMPYNUMPY
How to specify multiple return types using type-hints
12 answers
NUMPYNUMPY
Javascript Error: IPython is not defined in JupyterLab
12 answers
Wiki
Python OpenCV | cv2.putText () method
numpy.arctan2 () in Python
Python | os.path.realpath () method
Python OpenCV | cv2.circle () method
Python OpenCV cv2.cvtColor () method
Python - Move item to the end of the list
time.perf_counter () function in Python
Check if one list is a subset of another in Python
Python os.path.join () method
| | | |
