資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何使用 CSS 居中表格？
<table> 標籤用於在 HTML 中建立傳統的表格元件。對於網頁設計，瞭解如何改進設計的整體視覺化至關重要。將表格居中就是這樣一個重要的方面。本教程將教我們如何使用 CSS 居中表格。
使用 margin-left 和 margin-right 屬性
這是一種流行的方法，用於在 HTML 和 CSS 中將表格元素居中對齊。CSS 的 margin-left 和 margin-right 屬性分別用於設定元素的左和右邊距。邊距會在元素邊框之外建立空間，有效地將元素推離頁面上的其他元素。
可以使用長度值（例如 px、em、cm）、百分比或預定義值 auto、inherit 或 initial 來設定屬性的值。
示例
<!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 檔案，它建立一個包含三列的表格：姓名、ID 和薪水。該表格有一個名為 "table-container" 的類，寬度為視口寬度的 70%，並在頁面上居中。表格標題單元格（姓名、ID 和薪水）和表格單元格都有一個 2px 實線邊框，顏色為 rgb(96, 100, 218)。
該表格有一行資料，包含姓名“Suranjan”，ID 為 12475142，薪水為 32000。
使用 grid 屬性
另一種流行的方法是使用 grid 屬性來居中對齊表格。網格是 HTML 和 CSS 的二維元素，我們可以用它來建立行和列。如果我們首先將表格宣告為網格元素，則可以使用網格的 place-items 屬性來居中對齊表格。place-items 屬性實際上可以水平和垂直居中對齊網格。
示例
<!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%）。body 部分設定為顯示為網格，並將專案居中在頁面上。
使用 Flexbox 屬性
另一種非常流行的方法是使用 CSS 的 flexbox 屬性來居中對齊表格。flexbox 是 HTML 和 CSS 的響應式元素。flexbox 有一些屬性，例如 alien-items、justify-content 等，我們可以用它們來居中表格。程式設計師通常認為這是居中表格最方便的方法。
示例
<!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 檔案，它建立一個包含三列的表格：姓名、ID 和薪水。該表格有一個名為 "table-container" 的類，寬度為視口寬度的 70%。表格標題單元格（姓名、ID 和薪水）和表格單元格都有一個 2px 實線邊框，顏色為 rgb(96, 100, 218)。該表格有一行資料，包含姓名“Suranjan”，ID 為 12475142，薪水為 32000。
HTML 文件的 body 部分具有 CSS 樣式 display: flex，這使得 body 成為一個 flex 容器。CSS 樣式 flex-direction: row 將 flex 容器專案的排列方向設定為一行。CSS 樣式 align-items 和 justify-content 分別垂直和水平居中對齊專案。
結論
在本文中，我們瞭解瞭如何在 CSS 的幫助下居中表格。在本教程中，我們看到了 margin 屬性、grid 和 flexbox 等的使用。在所有討論的方法中，應該使用 flexbox。這是因為 flexbox 更方便並且對 UI 元素具有響應性。
瀏覽量：215
