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

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

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

開始

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

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

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

td,th {
text-align: center;
}

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

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

th {
text-align: center;
}

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

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

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

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

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

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

<td class="centered-cell">

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

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

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

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

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

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

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