HTML5 テーブルの `cellpadding`、`cellspacing`、`valign`、および `align` と同じ視覚効果を実現するにはどうすればよいですか?

HTML5 テーブルで cellpadding、cellspacing、valign、align を置換する方法

HTML5 では、属性 cellpadding、cellspacing、valign、およびalign は非推奨となり、有効ではなくなりました。ただし、CSS を使用しても同じ視覚効果を実現できます。

セルパディングの置換

表のセル内にスペースを追加するには、padding プロパティを使用します:

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

セル間隔の置換

表のセル間の間隔を制御するには、border-collapse プロパティを使用します:

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

または、border-spacing: 0 を使用できます。セル間の間隔をなくすには:

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

valign の置換

vertical-align プロパティを使用して、表のセルの内容を垂直方向に揃えます:

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

align (center) を置き換えます

margin プロパティを使用して、ページの表を中央に配置します:

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

以上がHTML5 テーブルの `cellpadding`、`cellspacing`、`valign`、および `align` と同じ視覚効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。