首頁 > web前端 > css教學 > 如何將 HTML 表格單元格中的文字置中?

如何將 HTML 表格單元格中的文字置中?

DDD
發布: 2024-10-31 15:31:10
原創
707 人瀏覽過

How to Center Text in HTML Table Cells?

如何將HTML 表格中的內容水平和垂直居中

在HTML 表格的單元格中水平和垂直居中文本可以增強頁面的視覺吸引力和可讀性。要實現此目的,可以考慮兩種方法:CSS 和內聯樣式屬性。

CSS 方法:

  1. 在 定義樣式區塊;
  2. 加入下列CSS:
<code class="css">td {
    text-align: center;
    vertical-align: middle;
}</code>
登入後複製

<code class="html"><table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>
登入後複製

內聯樣式屬性方法:使用直接在 中的樣式屬性將每個表格單元格的文字對齊和垂直對齊屬性設定為“居中”。 以下是示範這兩種方法的範例:在上面的範例中,兩個表格都會在所有儲存格中顯示居中的文字內容。如果您想要將對齊方式套用至多個表格或在不同頁面上重複使用樣式表,則 CSS 方法可能會很有用。另一方面,內聯樣式屬性允許對單一單元格進行更具體的控制。

以上是如何將 HTML 表格單元格中的文字置中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板