芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします.

はてなブログ(マークダウン記法)での表の挿入について参考サイトまとめ

はてなブログもといマークダウン記法での表が上手くいかず,色々試してようやく...
なので,その時に参考にしたサイトをまとめておこうかと.

参考サイト

  1. はてなブログで表を載せる方法(デザイン編) - 雪ん子’s report
  2. はてなブログで表(テーブル)を載せる方法 - 雪ん子’s report
  3. 文字サイズと行の高さを変更 - 雪ん子’s report
  4. なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー) - 主に言語とシステム開発に関して
  5. HTMLで表をつくりたい。table を作ってみる。 - CSS HTML 初心者 勉強中。
  6. ブログにtable(表)を挿入する簡単な方法 Excel→HTML変換ツールの活用 - Minimal Green
  7. markdown 表 幅 変えたい - ばいばいバイオ
  8. HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
  9. 空白文字とは?適切な使い方など徹底解説!|SEOラボ
  10. https://beginners-hp.com/html-tag/a-href.html

以上から

[1]~[4]から, CSSデザイン例を有難~くそのままコピペさせてもらい,自身のはてなブログに適用させてもらいました. その手順として,

  1. はてなブログの管理画面の左メニューから”デザイン”を左クリックで選択
  2. スパナの形のアイコンの”カスタマイズ”を左クリック
  3. 一番下の”{}デザインCSS”を左クリック
  4. 表示された文字入力するところを左クリック
  5. すでに書いてあるものの下にコピペ
  6. 上にある”変更を保存する”をクリックでデザインが適用される

コピペとはいえ,[4]に書いてあることをつけ足したり, [1]に書いてある 上手くいかなかったとき用の変更をしてあるんで,一応自身の例として以下にCSS例を載せておきます.

/* 表 */
div.wrapper {
  /* 中身のテーブルがこのフレームの幅を超えて横にはみ出たらスクロールする */
  overflow-x : scroll;
  width : 200px;
}
.entry-content table {
 width : auto; /* 文字に合わせて大きさを自動に */
}
.entry-content table caption{ /* タイトル */
font-size : 17px; /* 文字の大きさ */
padding : 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
 border : 1px solid #000000; /* 線の太さ・種類・色コード */
 /*background: #B0DFFF;  背景色 */
 text-align : center; /* 中央揃え */
 padding : 0.5em; /* 文字周りの余白 */
 white-space : nowrap; /* 見出しセルの内容は改行しない */
}
.entry-content table td { /* 普通のセル */
 border : 1px solid #000000; /* 線の太さ・種類・色コード */
 padding : 0.5em; /* 文字周りの余白 */
 word-break : break-all; /* 列幅は見出しセルに合わせ,列幅に合わせて改行 */
}
/* 表ここまで */
/* スクロール */
#sc01 {
box-sizing: border-box; /* スクロール用の箱 */
overflow-x: scroll; /* 横スクロール */
 -webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}
/* スクロールここまで */

ほぼコピペ.なので,ブログに載っけないほうがいいかと思いましたが,まぁ多少の改変ありますし,私の場合はこうでしたよ~という 報告という体で載せることにしまんで,お願いします.
以上のCSSは,表の列幅全て,見出し行の列幅と同じになる設定なので,見出し行の列幅をあらかじめ大きく取っておく必要があり,実際には表示しない文字が欲しくなります. そこで を多用することに. とはいえ,半角スペース一文字分なので,日本語一文字分埋めるには 2つ必要ってことになる. と思いきや,どうやら[9]によると全角スペースはキーボード打ちでもいいようですね. もしくは を使うか,ですね.
また,セル中にリンクを張る場合は[10]にあるように,

はてなブログのマークダウンでの書き方
[リンク先名](URL)
↓
HTMLテーブルでの書き方
<a href="URL" target="_blank">リンク先名</a>

というようにセル内(tdタグ内)に書きましょう.
これで解決かな~

HTML形式の表の書き方例)

以上で環境は整ったケド,じゃあ,どうやって表を挿入するの?っていうのを書いてませんでしたね... なんで,書きます.以下が例です.
ちなみに,<div>は置いといて,<table>での表の作成は,Jupyter notebookのMarkdownでも使えたので, Markdown環境ならどれでも使えそうですね~

<div id=sc01>
<table>
<caption>ポプテピピック リメイク版CV</caption>
<thead>
<tr>
<th>&nbsp;</th>
<th>ポプ子(Aパート)</th>
<th>ピピ美(Aパート)&nbsp;&nbsp;</th>
<th>ポプ子(Bパート)&emsp;&emsp;&emsp;</th>
<th>ピピ美(Bパート)&emsp;</th>
</tr>
</thead>
<tbody>
<tr>
<th>12話</th>
<td>こおろぎさとみ</td>
<td>矢島晶子</td>
<td>江原正士</td>
<td>大塚芳忠</td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>

\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow \Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow\Downarrow こんな感じ

ポプテピピック リメイク版CV
  ポプ子(Aパート) ピピ美(Aパート)   ポプ子(Bパート)    ピピ美(Bパート) 
12話 こおろぎさとみ 矢島晶子 江原正士 大塚芳忠

以上において,<table>タグ内に

  • <thread>:表のヘッダー部分
    • <tr>:行
      • <th>:セル(色付き?)
  • <tbody>:表の中身
    • <tr>:行
      • <th>:セル(色付き?)
      • <td>:セル
        • colspan="n":水平方向のセルの連結
        • rowspan="n":垂直方向のセルの連結
        • bgcolor="":セルの背景色を指定

を指定して,表を作成するって訳っスね~.
また,<div>タグでcssを指定してるわけですね~
詳しくは [5]を参考に.

www.tagindex.com