標籤用於在HTML中建立傳統的元件稱為表格。在設計網頁時,了解如何改善設計的整體視覺化是必不可少的。將表格居中對齊是其中一個重要方面。本教學將教我們如何使用CSS將表格置中。
使用margin-left和margin-right屬性
這是 HTML 和 CSS 中居中對齊表格元素的流行方法。 CSS 的 margin-left 和 margin-right 屬性分別用來設定元素的左邊距和右距。邊距在元素邊框之外創造空間,有效地將元素推離頁面上的其他元素。
屬性的值可以使用長度值(例如,px、em、cm)、百分比或預先定義的值auto、inherit或initial進行設定。
Example
的中文翻譯為:範例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>id</th>
<th>Salary</th>
<tr>
<td>Suranjan</td>
<td>12475142</td>
<td>32000</td>
</tr>
</table>
</body>
</html>
登入後複製
說明
程式碼是一個 HTML 文件,它會建立一個包含三列的表格:Name、id 和 Salary。該表格的「表格容器」類別寬度為視窗寬度的 70%,並且位於頁面中央。表頭單元格(姓名、id 和薪水)和表格單元格具有 2 像素實線邊框,顏色為 rgb(96, 100, 218)。
表格有一行數據,其中包含姓名“Suranjan”,id 為 12475142,薪資為 32000。
使用grid屬性
另一種常用的方法是使用grid屬性來居中對齊表格。網格是HTML和CSS的二維元素,我們可以使用它們來建立行和列。如果我們先將表格宣告為網格元素,然後可以使用網格的place-items屬性來居中對齊表格。 place-items屬性實際上是水平和垂直居中對齊網格。
Example
的中文翻譯為:範例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: grid;
place-items: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>country</th>
<th>Occupation</th>
<tr>
<td>Tom Holland</td>
<td>USA</td>
<td>Software Developer</td>
</tr>
</table>
</body>
</html>
登入後複製
說明
這是一個基本的 HTML 程式碼,用於建立一個包含三列的表格 - 姓名、國家/地區和職業。表格有一行數據,其中包含姓名 (Tom Holland)、國家/地區(美國)和職業(軟體開發人員)的值。
HTML 的head 部分中定義的CSS 樣式將表格的邊框、表格單元格(th、td)和表格本身(class="table-container")設為2px 實線RGB 顏色(96, 100, 218)。表格的寬度設定為 70vw(視窗寬度的 70%)。正文部分設定為顯示為網格並將項目置於頁面的中心。
使用 Flexbox 屬性
另一種非常流行的方法是使用CSS的flexbox屬性來居中對齊表格。 Flexbox 是 HTML 和 CSS 的響應式元素。 Flexbox具有某些屬性,例如alien-items、justify-content等,我們可以使用它們來使表格居中。程式設計師通常發現此方法是使表格居中的最方便的方法。
Example
的中文翻譯為:範例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.table-container,
th,
td {
border: 2px solid rgb(96, 100, 218);
}
.table-container {
width: 70vw;
}
body{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table class="table-container">
<th>Name</th>
<th>class</th>
<th>Subject</th>
<tr>
<td>Suranjan</td>
<td>12</td>
<td>Mathematics</td>
</tr>
</table>
</body>
</html>
登入後複製
說明
這段程式碼是一個HTML文件,它建立了一個包含三列的表格:Name(姓名)、id(編號)和Salary(薪水)。表格具有一個類別名為"table-container",寬度為視口寬度的70%。表頭單元格(Name、id和Salary)以及表格單元都有2px的實線邊框,顏色為rgb(96, 100, 218)。表格有一行數據,包含姓名"Suranjan",編號為12475142,薪水為32000。
HTML文件的主體具有CSS樣式display: flex,使得主體成為一個彈性容器。 CSS樣式flex-direction: row將彈性容器的項目方向設定為行。 CSS樣式align-items和justify-content分別在垂直和水平方向上居中項目。
結論
在本文中,我們了解如何使用 CSS 將表格置中。在本教程中,我們看到了邊距屬性、網格、Flexbox 等的用法。在討論的所有方法中,應該使用 Flexbox。這是因為彈性框更方便並且能夠回應 UI 元素。
以上是如何用 CSS 使表格居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2024-10-13 13:32:21
-
2024-10-12 11:58:51
-
2024-10-11 20:06:51
-
2024-10-11 18:59:31
-
2024-10-11 18:30:51
-
2024-10-11 15:51:51
-
2024-10-11 15:42:10
-
2024-10-11 14:41:20
-
2024-10-11 14:08:31
-
2024-10-11 13:42:21