網站制作技術探索之表格的單元格內容元素如何居中

2022-04-25 分類：網站制作

如果您是一個網站設計制作新手，您可能會有關于如何將文本居中于表格單元格中的問題。有了本文這些指南，只需幾分鐘就能掌握這項技術。在網站制作前端開發中，表格的單元格內容元素如何居中？這看似一個很讓人費解的問題，但是通過本文的學習，相信即便是剛剛基礎網站設計制作的人，也可以輕松實現。

開始

在單元格中居中文本最好使用CSS，就像您在Web頁面的另一個元素中居中文本一樣。然而，在你開始之前，你需要決定你想要以什么為中心。對于表，您有幾個選項，包括表中的每個單元格；表中的每個標題單元格、表頭、表體或表腳中的每個單元格。還可以將表中的一個或一組特定單元格居中。此外，還應在文檔頭部創建內部樣式表，或將其作為外部樣式表附加到文檔中。您將把樣式放在該樣式表中的表單元格的中心。

如何居中表格中的每個單元

將以下行添加到樣式表中：

td,th {
text-align: center;
}

如何居中表格中的每個標題單元。

將以下行添加到樣式表中：

th {
text-align: center;
}

使表頭、表體或腳中的每個元素居中

為了使這些單元格居中，您需要添加并不總是使用的表標記，例如、和。然后，您將用這些標記包圍您的表格單元，以標識表頭、主體和腳部。之后，您將向樣式表中添加以下內容：

thead th, thead td {
text-align: center;
}
tbody th, tbody td {
text-align: center;
}
tfoot th, tfoot td {
text-align: center;
}

刪除不希望居中的區域的樣式。

如何使表中的一個或多個特定單元居中

為此，需要在要居中的單元格上設置一個類，將以下屬性添加到要居中的表格單元中：

class="centered-cell">

然后將以下內容添加到樣式表中：

.centered-cell {
text-align: center;
}

可以將此類添加到表中的任何單元格中，請不要猶豫在任何表格單元格上使用這些樣式，您可以在合并的單元格或單個單元格上使用它們，其中的文本將居中。

分享名稱：網站制作技術探索之表格的單元格內容元素如何居中
當前地址：http://m.kartarina.com/news/146423.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作等

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容