首頁 > web前端 > css教學 > 主體

如何實現與 HTML5 表格中的 cellpadding、cellspacing、valign、align 相同的視覺效果?

DDD
發布: 2024-10-31 15:34:02
原創
237 人瀏覽過

How to Achieve the Same Visual Effects as `cellpadding`, `cellspacing`, `valign`, and `align` in HTML5 Tables?

如何替換HTML5 表格中的cellpadding、cellspacing、valign 和align

在HTML5 中,屬性cellpadding、cellspacing、valign、

在HTML5 中,屬性cellpadding、cellspacing、valign被棄用並且不再有效。但是,您仍然可以使用 CSS 來實現相同的視覺效果。

替換cellpadding

使用padding 屬性在表格單元格內新增空間:
<code class="css">th, td {
  padding: 5px;  /* Equivalent to cellpadding="5" */
}</code>
登入後複製

替換單元格間距

<code class="css">table {
  border-collapse: separate;
  border-spacing: 5px;  /* Equivalent to cellspacing="5" */
}</code>
登入後複製
替換單元格間距

使用border-collapse 屬性來控製表格單元格之間的間距:
<code class="css">table {
  border-collapse: collapse;
  border-spacing: 0;  /* Equivalent to cellspacing="0" */
}</code>
登入後複製

或者,您可以使用border-spacing: 0消除單元格之間的間距:

替換valign
<code class="css">th, td {
  vertical-align: top;  /* Equivalent to valign="top" */
}</code>
登入後複製

使用Vertical-align 屬性垂直對齊表格單元格的內容:

替換對齊(居中)
<code class="css">table {
  margin: 0 auto;  /* Equivalent to align="center" */
}</code>
登入後複製
使用margin 屬性使表格在頁面上居中:

以上是如何實現與 HTML5 表格中的 cellpadding、cellspacing、valign、align 相同的視覺效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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