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

How to Replace cellpadding, cellspacing, valign, and align in HTML5 Tables

In HTML5, the attributes cellpadding, cellspacing, valign, and align are deprecated and no longer valid. However, you can still achieve the same visual effects using CSS.

Replacing cellpadding

Use the padding property to add space within table cells:

<code class="css">th, td {
  padding: 5px;  /* Equivalent to cellpadding="5" */
}</code>

Replacing cellspacing

Use the border-collapse property to control the spacing between table cells:

<code class="css">table {
  border-collapse: separate;
  border-spacing: 5px;  /* Equivalent to cellspacing="5" */
}</code>

Alternatively, you can use border-spacing: 0 to eliminate the spacing between cells:

<code class="css">table {
  border-collapse: collapse;
  border-spacing: 0;  /* Equivalent to cellspacing="0" */
}</code>

Replacing valign

Use the vertical-align property to align the content of table cells vertically:

<code class="css">th, td {
  vertical-align: top;  /* Equivalent to valign="top" */
}</code>

Replacing align (center)

Use the margin property to center the table on the page:

<code class="css">table {
  margin: 0 auto;  /* Equivalent to align="center" */
}</code>

The above is the detailed content of How to Achieve the Same Visual Effects as `cellpadding`, `cellspacing`, `valign`, and `align` in HTML5 Tables?. For more information, please follow other related articles on the PHP Chinese website!