在 HTML 表 Javascript 中顯示 Sql 數據

| | | | |

在 Web 開發的早期,HTML 表格非常簡單,缺乏廣泛的樣式選項。然而,如今,大多數表格的樣式都旨在為用戶創造更美觀和實用的體驗。

CSS 提供了一組表格樣式屬性。除其他外,這些屬性允許您分隔表格單元格、指定表格邊框以及指定表格寬度和高度。

本教程將通過示例說明如何使用 CSS 設置表格樣式.在本教程結束時,您將成為專家。

HTML 表格

HTML 代碼定義了表格的結構。使用

標籤來定義一個表格。 、
標記分別指定行、表格標題和內容單元格。

讓我們看一個示例 HTML 表格。在下面的示例中,我們有一個表格列出了 2020 年 3 月 23 日這一周在紐約時報暢銷書排行榜上的前五本書:

Screen Shot 2020 03 24 at 09.50.10 1

我們表格的代碼如下:

這個表三列六行,包括一行`on

表格 CSS

CSS 用於設置表格樣式。儘管上表以有組織的方式顯示了數據,但它是用純 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 的填充我們表格的內容,包括標題單元格。我們可以使用以下代碼:

我們的代碼返回:

屏幕截圖 2020 03 24 至 08/10.03 1

現在每一行的內容和我們的 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