HTML5におけるtableのwidthなど属性の代替CSS
html5ではそれまで使えていた多くの属性値が廃止となっています。
特に属性が多かったtableは影響大です。
代わりにCSSを使うことを求められています。
「○○の属性にあたるCSSは何？」
HTML5におけるtableのwidthなど属性の代替CSSを解説します。
目次
width属性→width
横幅を指定するwidth属性はCSSでも「width」です。
CSSの場合pxなどの単位が必須となります。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table width="200" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example{
width: 200px;
}
</style>
<table class="example" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
border属性→border
線について指定するborder属性はCSSでも「border」です。
CSSでは「border:1px solid #333」のように、幅・種類・色を指定する必要があります。
border属性はhtml5でも有効です。ただし、線の幅を指定するものではなく、「線があるか、ないか」を示すものとなります。
線があるなら「border」か「border="1"」、線がないなら未設定か「boder=""」と設定します。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table border="1">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example2,.example2 td{
border: 1px solid #333;
}
</style>
<table class="example2" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>cellspacing属性→border-spacing
線と線の隙間幅を指定するcellspacing属性はCSSでは「border-spacing」です。
CSSの場合pxなどの単位が必須となります。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table cellspacing="10" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example3{
border-spacing: 10px
}
</style>
<table class="example3" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>cellpadding属性→tdにpadding
セルの内側の余白を指定するcellpadding属性は、tableではなくtdに「padding」を指定します。
CSSの場合pxなどの単位が必須となります。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table cellpadding="10" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example4 td{
padding: 10px;
}
</style>
<table class="example4" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>align属性→margin(-left):auto
tableの位置を調整するalign属性は、中央寄せなら「margin: 0 auto」、右寄せなら「margin-left: auto」を指定します。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table align="center" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example5{
margin: 0 auto;
}
</style>
<table class="example5" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>| セル1 | セル2 |
| セル3 | セル4 |
<table align="right" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example6{
margin-left: auto;
}
</style>
<table class="example6" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>「align="right"」をCSSにすると本当は「float:left」です。
しかしfloat:leftは非常に使いづらいため「margin-left: auto」を使いましょう。
bgcolor属性→background
表(table)やマス(td)の背景色を指定するbgcolor属性はCSSではbackground(正確にはbackground-color)です。
html属性ではすべてのtdにbgcolor属性を指定していましたが、CSSでは一回ですべてのtdに指定することができます。
html
| セル1 | セル2 |
| セル3 | セル4 |
<table bgcolor="#57d04d" border>
<tr>
<td bgcolor="#fff8c5">セル1</td><td bgcolor="#fff8c5">セル2</td>
</tr>
<tr>
<td bgcolor="#fff8c5">セル3</td><td bgcolor="#fff8c5">セル4</td>
</tr>
</table>CSS
| セル1 | セル2 |
| セル3 | セル4 |
<style>
.example7{
background: #57d04d;
}
.example7 td{
background: #fff8c5;
}
</style>
<table class="example7" border>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>【まとめ】tableの属性の代替CSS
| 属性の 状態 | 属性 | CSS |
| 廃止 | width="200" | width:200px |
| 有効 | border="1" | border:1px solid #000 |
| 廃止 | cellspacing="10" | border-spacing:10px |
| 廃止 | cellpadding="10" | tdにpadding:10px |
| 廃止 | align="center" | margin: 0 auto |
| 廃止 | align="right" | margin-left: auto |
| 廃止 | bgcolor="#57d04d" | background:#57d04d |
以上、HTML5におけるtableのwidthなど属性の代替CSSでした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
