表(テーブル)についてあれこれ[編集者向け]

ページ名:表(テーブル)についてあれこれ

編集者の方に向けた、表(テーブル)についての雑記です。
もちろん編集の練習、項目の追加等ご自由にどうぞ。

【注意!】当記事の内容はPCのGoogle Chromeで編集を行う方向けです。他のブラウザとは仕様が異なる可能性がありますのでご注意ください。

基礎知識

☆☆☆☆☆

段落1

表上部
ヘッダ(th)↓→ 列↓
行→ テーブルデータ(td)
行→ テーブルデータ(td)
表下部

段落2

☆☆☆☆☆

ソースで見比べる +ソースで見比べる -

 

☆☆☆☆☆

<p>段落</p>

<div class="uk-overflow-container">表上部
<table class="uk-table">
    <thead>
        <tr>
            <th scope="row">ヘッダ(th)&darr;&rarr;</th>
            <th scope="col">列&darr;</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">行&rarr;</th>
            <td>テーブルデータ(td)</td>
        </tr>

        <tr>
            <th scope="row">行&rarr;</th>
            <td>テーブルデータ(td)</td>
        </tr>
    
</tbody>
</table>
表下部</div>

<p>段落</p>

☆☆☆☆☆

  • 水色の範囲が表(テーブル)を表すHTMLコード
  • 赤文字は1行目橙文字は2行目緑文字は3行目
  • 段落分けは〈段落1〉〈表上部&表&表下部〉〈段落2〉の計3段落

 

○最初に

  • 表マークをクリックすると行数・列数・ヘッダの有無等が設定できる
  • その際キャプション・表の概要についても設定できるが省略
  • ヘッダのセルの文字の配置はデフォルトで中央揃え、
    それ以外(テーブルデータ)のセルの文字の配置は左揃え
  • 右クリックから表・列・行・セルのプロパティを変更することができる。文字の配置が変更できるほか、ヘッダ行数列数についての再設定もできる

○セルからはみ出した表上部・表下部も表の一部

  • 表上部に記入するには、1番左上のセルの文字からカーソルを左に動かし表の左側面全体にカーソルを点滅させて文字を打ち込む。
  • 表下部の方は、1番右下のセルの文字からカーソルを右に動かし表の右側面全体にカーソルを点滅させて文字を打ち込む。

 

表を縦に2つ並べる方法について

表を続けて並べるやり方は2通りある。
どんな見た目の仕上がりにしたいかで使い分けよう!

【パターン1】
空白の段落を2つ以上作っておき、それぞれの段落で表を作る。

《結果》

1
   
 

(段落)

2つめ
   

上は3つの空白の段落のうち1番目と3番目の段落で表を作成した結果である。
上の場合、表と表の間の(段落)を消すと、
↓↓↓

1
   
2つめ
   

このように2つの表の間が完全に詰まる

 

【パターン2】
空白の段落にまず1つ表を作り、表の右側面でEnter(次の段落へ)を押す。出現した空白の段落に2つめの表を作る

《結果》

1
   
2つめ
   

 

このように、2つの表のあいだに少しだけ隙間が空く
なお、この隙間に文字を入れることはできない。

余談 +余談 -

パターン1と2ではソースコードに、ざっくり言うと以下のような差異がある
(赤…1つめの表、青…2つめの表)

【パターン1】

<div>
</div>

<div>
</div>

【パターン2】

<div>
</div>

<div>
</div>

 

…ことは確認したが、その差異と表示形式がどう関連するのかについては不明。HTMLについて詳しい方、教えてください。

 

 

バグについて

編集中に発見したバグ置き場(後日追記予定)

 

 

フリースペース

 

 

 

 

 

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する