公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.430618.com 】, 免友鏈快審服務(50元/站),
這是 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 文件,它創建一個包含三列的表:Name、id 和 Salary。該表格的“表格容器”類寬度為視口寬度的 70%,并且位于頁面中央。表頭單元格(姓名、id 和薪水)和表格單元格具有 2 像素實線邊框,顏色為 rgb(96, 100, 218)。
該表有一行數據,其中包含姓名“Suranjan”,id 為 12475142,工資為 32000。
另一種常用的方法是使用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%)。正文部分設置為顯示為網格并將項目置于頁面的中心。
另一種非常流行的方法是使用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文件,它創建了一個包含三列的表格: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 使表格居中?的詳細內容,更多請關注www.92cms.cn其它相關文章!
網友整理
注冊時間:
網站:5 個 小程序:0 個 文章:12 篇
網站
小程序
文章
會員
數獨一種數學游戲,玩家需要根據9
您可以通過答題星輕松地創建試卷
各種考試題,題庫,初中,高中,大學四六
記錄運動步數,積累氧氣值。還可偷
每日養生,天天健康
通用課目體育訓練成績評定