網(wǎng)站制作技術探索之表格的單元格內(nèi)容元素如何居中

2022-04-25    分類： 網(wǎng)站制作

如果您是一個網(wǎng)站設計制作新手，您可能會有關于如何將文本居中于表格單元格中的問題。有了本文這些指南，只需幾分鐘就能掌握這項技術。在網(wǎng)站制作前端開發(fā)中，表格的單元格內(nèi)容元素如何居中？這看似一個很讓人費解的問題，但是通過本文的學習，相信即便是剛剛基礎網(wǎng)站設計制作的人，也可以輕松實現(xiàn)。
開始
在單元格中居中文本最好使用CSS，就像您在Web頁面的另一個元素中居中文本一樣。然而，在你開始之前，你需要決定你想要以什么為中心。對于表，您有幾個選項，包括表中的每個單元格；表中的每個標題單元格、表頭、表體或表腳中的每個單元格。還可以將表中的一個或一組特定單元格居中。此外，還應在文檔頭部創(chuàng)建內(nèi)部樣式表，或將其作為外部樣式表附加到文檔中。您將把樣式放在該樣式表中的表單元格的中心。
如何居中表格中的每個單元
將以下行添加到樣式表中：
td,th {
text-align: center;
}
如何居中表格中的每個標題單元。
將以下行添加到樣式表中：
th {
text-align: center;
}
使表頭、表體或腳中的每個元素居中
為了使這些單元格居中，您需要添加并不總是使用的表標記，例如<thead>、<tbody>和<tFoot>。然后，您將用這些標記包圍您的表格單元，以標識表頭、主體和腳部。之后，您將向樣式表中添加以下內(nèi)容：
thead th, thead td {
text-align: center;
}
tbody th, tbody td {
text-align: center;
}
tfoot th, tfoot td {
text-align: center;
}
刪除不希望居中的區(qū)域的樣式。
如何使表中的一個或多個特定單元居中
為此，需要在要居中的單元格上設置一個類，將以下屬性添加到要居中的表格單元中：
<td class="centered-cell">
然后將以下內(nèi)容添加到樣式表中：
.centered-cell {
text-align: center;
}
可以將此類添加到表中的任何單元格中，請不要猶豫在任何表格單元格上使用這些樣式，您可以在合并的單元格或單個單元格上使用它們，其中的文本將居中。

當前名稱：網(wǎng)站制作技術探索之表格的單元格內(nèi)容元素如何居中
文章網(wǎng)址：http://www.bm7419.com/news23/146423.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站制作等

廣告

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

搜索引擎優(yōu)化