HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLテーブルサイズ


HTMLテーブルは、列、行、またはテーブル全体でサイズを変えることができます。


     
     
     
     
     
     
     
     

またはプロパティstyleで属性を 使用して 、テーブル、行、または列のサイズを指定します。widthheight


HTMLテーブル幅

テーブルの幅を設定するには、要素にstyle 属性を追加します。<table>

テーブルの幅を100%に設定します。

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

注:幅のサイズ単位としてパーセンテージを使用することは、この要素がその親要素(この場合は要素)と比較される幅を意味します<body>


HTMLテーブルの列幅

     
     
     

特定の列のサイズを設定するには、または 要素style に属性を追加します。<th><td>

最初の列の幅を70%に設定します。

<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


HTMLテーブルの行の高さ

     
     
     

style 特定の行の高さを設定するには、テーブルの行要素に属性を追加します。

2番目の行の高さを200ピクセルに設定します。

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="height:200px">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

HTML演習

エクササイズで自分をテストする

エクササイズ:

CSSスタイルを使用して、テーブルの幅を300ピクセルにします。

<表 >
  <tr>
    <th>名</ th>
    <th>姓</ th>
    <th>ポイント</ th>
  </ tr>
  <tr>
    <td>ジル</ td>
    <td>スミス< / td>
    <td> 50 </ td>
  </ tr>
</ table>