亚洲在线影院,91精品国产电影,日韩国产中文字幕

標簽用于在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分別在垂直和水平方向上居中項目。