表についてあれこれ［編集者向け］

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

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

基礎知識

☆☆☆☆☆

段落1

表上部

ヘッダ（th）↓→	列↓
行→	テーブルデータ（td）
行→	テーブルデータ（td）

表下部

段落2

★★★★★

ソースコードで見比べる　＋

☆☆☆☆☆

<p>段落1</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>段落2</p>

★★★★★

• <div>で囲まれた範囲（水色の範囲）のコードが表（テーブル）を表す
• 赤文字は1行目、橙文字は2行目、緑文字は3行目
• 段落分けは〈段落1〉〈表上部&表&表下部〉〈段落2〉の計3段落

○最初に

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

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

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

＊

---

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

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

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

表	1

表	2つめ

{"target":"2","option":[],"color":{"head":"#ff8080"}}

{"target":"3","option":[],"color":{"head":"#8080ff"}}

 

このように2つの表の間が完全に詰まる。
間に空白（段落）を作りたい時は、あらかじめ段落を3つ以上作っておく

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

表	1

表	2つめ

{"target":"4","option":[],"color":{"head":"#ff8080"}}

{"target":"5","option":[],"color":{"head":"#8080ff"}}

 

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

余談　＋

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

【パターン1】
それぞれのdivが独立している

<div>
</div>

<div>
</div>

【パターン2】
divの中にdivがある状態

<div>
<div>

</div>
</div>

…ことは確認したが、その差異と表示形式がどう関連するのかについては不明。
ソースを確認してページの修繕を行う際の参考に

＊

---

プラグイン機能を使った表

優勝者	最高レート	文字数	キャラ
灼熱のレイア	1675	6	LU
15人目の天才	1691	7	FO
煙草マスターの子	1634	8	LI

上の表をアレンジしてみましょう。
これはこのページの6番目の表です

表の中以外の場所でプラグインメニューを開く→テーブルに対する修飾を指定→テーブル選択（6つ目）

• 自動連番
  最初の数字：1　行ごとに増やす数字：1　連番を振らない行数：0　連番を振る列の見出し：回
• ソート
  オン　にする
• 表の修飾
  見出しの色：任意　シマウマ色指定：オン　行のマウスホバー時の色：任意（灰色にしてみた）

以上の設定を適用させると・・・↓

優勝者	最高レート	文字数	キャラ
灼熱のレイア	1675	6	LU
15人目の天才	1691	7	FO
煙草マスターの子	1634	8	LI

{"target":"7","option":{"increment":true,"increment_start":"1","increment_step":"1","increment_skip":"0","increment_label":"\u56de"},"color":{"zebra":true,"head":"#ff8080","hover":"#c0c0c0"},"sort":{"default":"none"}}

このように表示される（編集ページではプレビューでのみ確認できる）。

自動連番は行数が多い表を作るときに有用。また行を追加すると自動的に連番を振ってくれるので、頻繁に行数を増やしたい表にも有効。

＊

---

豆知識

〇セルの中は1段落まで。

Enterを押して 段落を増やすと	少しセルが縦に広がってしまう
入力内容を消しても元に戻らない	行を削除するしかない
Shift＋Enter（＝改行） をした結果	これなら大丈夫

＊

〇一番右下のマスでTabキーを押すことでも行を下に増やすことが可能。
　これを利用すれば、同じ行内で配置の異なる表を手っ取り早く作成することができる。

例えば	こんな	表
例えば	こんな	表
例えば	こんな	表

＊

 

 

フリースペース

 

 

 

コメント

[名無し]

wiki3のアップデートで表が所々壊れちゃってるな
選手ページにある第9回の部分とか結構酷いことになっとる