資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何居中對齊 HTML 表格的內容？
在 HTML 中，<table> 標籤以表格的形式顯示內容。預設情況下，HTML 表格內內容的對齊方式是靠左。在本教程中，我們將瞭解如何居中對齊 HTML 表格的內容。
使用 <center> 標籤
顧名思義，<center> 標籤有助於對齊任何容器內的文字。要居中對齊文字，我們需要將文字包含在 <center> 和 <center/> 標籤之間。
但是，這並不是推薦的做法。我們應該只在必須使用 HTML 標籤進行設計時才使用此方法。與該標籤相關的缺點是，您必須手動將每個文字都包含在標籤中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table,td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th><center>Name</center></th>
<th><center>Id</center></th>
<th><center>Designation</center></th>
</tr>
<tr>
<td><center>Tom Holland</center></td>
<td><center>12124325</center></td>
<td><center>Software Engineer</center></td>
</tr>
<tr>
<td><center>Pascal</center></td>
<td><center>12124329</center></td>
<td><center>Designer</center></td>
</tr>
</table>
</center>
</body>
</html>
在 td 標籤中使用 align 屬性
我們可以在 td 標籤中使用 align 屬性來獲得類似的結果。但是，此方法同樣不推薦，因為我們必須在每個標籤中手動使用此程式碼。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th align="center">Name</th>
<th align="center">Qualification</th>
<th align="center">Designation</th>
</tr>
<tr>
<td align="center">Hellen Smith</td>
<td align="center">MBA</td>
<td align="center">Marketing officer</td>
</tr>
<tr>
<td align="center">John Summerfield</td>
<td align="center">CSE</td>
<td align="center">Software Engineer</td>
</tr>
</table>
</center>
</body>
</html>
使用 CSS text-align 屬性
在表格中居中對齊文字的更好方法是使用 CSS 的 text-align 屬性。您可以將此屬性用於 <table>、<tr> 或 <td> 標籤。這些標籤分別代表表格、表格行和表格資料。
儘管 CSS 不會在您使用多個 text-align 屬性時報錯，但使用以下任意一個屬性就能滿足我們的需求。
tr{ text-align: center; }
td{ text-align: center; }
table{ text-align: center; }
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
td,th{
border:1px solid;
padding:3vw;
}
table{
text-align: center;
}
</style>
</head>
<body>
<center>
<table>
<tr>
<th>Name</th>
<th>city</th>
<th>Country</th>
</tr>
<tr>
<td>Steve Smith</td>
<td>Sydny</td>
<td>Australia</td>
</tr>
<tr>
<td>Virat Kohli</td>
<td>Mumbai</td>
<td>India</td>
</tr>
</table>
</center>
</body>
</html>
結論
在本文中，我們瞭解瞭如何在表格中居中對齊文字。使用 <center> 標籤是一種傳統方法。它是在網際網路依賴 Web 1.0 時代使用的。如今，我們使用 text-align 等 CSS 屬性來居中對齊文字。
更新於: 2023年3月13日
2K+ 閱讀量
廣告