ホームへ

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>

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でした。

マンガで読める関連記事