【html/CSS】tableの幅や高さを自動調整する方法

「tableの幅を自動調整したい！」

「tableの幅を自動調整しないでほしい！」

tableの幅を自動調整する方法としない方法を解説します。

【html】widthとheightを指定しない

tableタグではwidth属性とheight属性で幅と高さを指定できます。

左下は指定した例です。

このwidth属性とheight属性をなくすことで自動調整にできます。（右下）

<table width="200" height="200" border="1">
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

<table border="1">
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

なお、tableにheightを指定するのはオススメしません。

行が増えたり、tdの大きさが変わることで変化するためです。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

【CSS】width:auto

CSSでtableの幅を自動調整するには「width:auto」を指定します。

なお「width:auto」は初期値であるため、指定しなくても自動調整状態になっています。

widthを上書きしたいときに「width:auto」を指定するといいでしょう。

<style>
.example{
    width: auto;
}
</style>
<table class="example" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

高さも「height:auto」で自動調整できますが、height自体指定することはほぼないため出番はあまりないでしょう。

【自動調整しない】width:○px

tableの幅を自動調整しない、つまり固定するには「width:○px」を指定します。

○には任意の数値が入ります。

px指定すると内容量に関わらず横幅が固定されます。

<style>
.example2{
    width: 200px;
}
</style>
<table class="example2" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

固定ではありませんが、%で指定することもできます。

%指定すると親の幅に応じた幅になります。レスポンシブ対応では必須の単位です。

<style>
.example3{
    width: 50%;
}
</style>
<table class="example3" border="1">
    <tr>
        <td>セルセルセル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セルセル4</td>
    </tr>
</table>

CSSで使う長さの単位【px･em･%･vw･vh/calc】

CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。またそれらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。

この記事を読む

まとめ

tableの幅を自動調整するには「width:auto」を指定。

tableの幅を自動調整しない、つまり固定するには「width:○px」を指定。

%指定すると親の幅に応じた幅になる。

以上、tableの幅を自動調整する方法としない方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む