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

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

如果您是一個(gè)網(wǎng)站設(shè)計(jì)制作新手，您可能會(huì)有關(guān)于如何將文本居中于表格單元格中的問題。有了本文這些指南，只需幾分鐘就能掌握這項(xiàng)技術(shù)。在網(wǎng)站制作前端開發(fā)中，表格的單元格內(nèi)容元素如何居中？這看似一個(gè)很讓人費(fèi)解的問題，但是通過本文的學(xué)習(xí)，相信即便是剛剛基礎(chǔ)網(wǎng)站設(shè)計(jì)制作的人，也可以輕松實(shí)現(xiàn)。

開始

在單元格中居中文本最好使用CSS，就像您在Web頁(yè)面的另一個(gè)元素中居中文本一樣。然而，在你開始之前，你需要決定你想要以什么為中心。對(duì)于表，您有幾個(gè)選項(xiàng)，包括表中的每個(gè)單元格；表中的每個(gè)標(biāo)題單元格、表頭、表體或表腳中的每個(gè)單元格。還可以將表中的一個(gè)或一組特定單元格居中。此外，還應(yīng)在文檔頭部創(chuàng)建內(nèi)部樣式表，或?qū)⑵渥鳛橥獠繕邮奖砀郊拥轿臋n中。您將把樣式放在該樣式表中的表單元格的中心。

如何居中表格中的每個(gè)單元

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

td,th {
text-align: center;
}

如何居中表格中的每個(gè)標(biāo)題單元。

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

th {
text-align: center;
}

使表頭、表體或腳中的每個(gè)元素居中

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

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

刪除不希望居中的區(qū)域的樣式。

如何使表中的一個(gè)或多個(gè)特定單元居中

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

class="centered-cell">

然后將以下內(nèi)容添加到樣式表中：

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

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

分享名稱：網(wǎng)站制作技術(shù)探索之表格的單元格內(nèi)容元素如何居中
當(dāng)前地址：http://www.jbt999.com/news/146423.html

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

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

猜你還喜歡下面的內(nèi)容