Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erzielt man die gleichen visuellen Effekte wie „cellpadding', „cellspacing', „valign' und „align' in HTML5-Tabellen?

DDD
Freigeben: 2024-10-31 15:34:02
Original
169 Leute haben es durchsucht

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

So ersetzen Sie Cellpadding, Cellspacing, Valign und Align in HTML5-Tabellen

In HTML5 sind die Attribute Cellpadding, Cellspacing, Valign und align sind veraltet und nicht mehr gültig. Mit CSS können Sie jedoch immer noch die gleichen visuellen Effekte erzielen.

Cellpadding ersetzen

Verwenden Sie die Padding-Eigenschaft, um Platz in Tabellenzellen hinzuzufügen:

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

Zellenabstand ersetzen

Verwenden Sie die Eigenschaft „border-collapse“, um den Abstand zwischen Tabellenzellen zu steuern:

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

Alternativ können Sie „border-spacing: 0“ verwenden um den Abstand zwischen Zellen zu beseitigen:

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

Valign ersetzen

Verwenden Sie die Vertical-Align-Eigenschaft, um den Inhalt von Tabellenzellen vertikal auszurichten:

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

Align (zentriert) ersetzen

Verwenden Sie die Margin-Eigenschaft, um die Tabelle auf der Seite zu zentrieren:

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

Das obige ist der detaillierte Inhalt vonWie erzielt man die gleichen visuellen Effekte wie „cellpadding', „cellspacing', „valign' und „align' in HTML5-Tabellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!