Home  >  Article  >  Web Front-end  >  How to Achieve the Same Visual Effects as `cellpadding`, `cellspacing`, `valign`, and `align` in HTML5 Tables?

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

DDD
DDDOriginal
2024-10-31 15:34:02154browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn