noteに表を貼る？ 張る？ 書く？ 方法を示すよ 👉 要するに noteに表示する方法
ｎｏｔｅは、表の機能が標準実装されていないので、表を載せる手段をあれこれと思案することになる。
表を作るのに最も使われているのは、Excelなどのスプレッドシートではないでしょうか。スプレッドシートで作った表を ｎｏｔｅに貼り付けたい場合、画像を貼り付けるのが手っ取り早い。罫線も色も、見たままを貼る事が出来る。
でも、ちょっと手直ししたい。なんて時にストレスだったりする。また、画像だと文字がつぶれてたり、ダークモードで見ると白バックがチカチカして、見づらかったりする。
そんな問題が、解決出来るかも知れません。
ここで紹介していくのは、の文字列をExcel、またはGoogleスプレッドシートで生成して、ｎｏｔｅに載せる方法です。ユーザー定義関数をマクロやGASを使わずに、LAMBDA関数で構築しています。
⚠️Excel またはGoogleスプレッドシートが使える環境が必要です。
✅こんな方におすすめ
普段から、ExcelやGoogleスプレッドシートを使っている
大きい表を表示したい
note上で表を修正、編集したい
表の見やすさが気になる
思い通りの表を作りたい
❌出来ないこと
文字や背景の色を変える
罫線を自由自在に引く
リンクを張る
Excelのファイルを入手
⚠️以下のいずれかの環境が必要です。
Excel 2021以降 (デスクトップ)
Microsoft 365 (オンライン)
Excel Online（オンライン無料版）
👆これをクリックすると、《閲覧のみ》の状態でファイルが📖開きます。
📖開いたら、[ ファイル ] → [ ダウンロード ] → [ Microsoft Excel (.xlsx) ] で📥ダウンロードします。
Excel 2021以降なら、📥ダウンロードしたファイルを開くだけです。
Microsoft 365 または Excel Online（無料版）の場合は、オンラインの新規ファイルとして📤アップロードしてください。
⚠️実は、そのままでは使うことが出来ません。変更が必要な箇所があります。
桃色のセルに LAMBDA関数が入っているのですが、これを修正します。
シングルクォート〔 ’ 〕が 〔 ’=LAMBDA(…) 〕の様に先頭についているので、削除して〔 =LAMBDA(…) 〕としてください。これで使えるようになります。へ進んでください。
桃色のセルに入っているLAMBDA関数を公開します。
これをCopilotやchatGPTなどに投げて何の関数なのか聞くと、色々教えてくれます。
ファイルの📥ダウンロードに抵抗がある方は、これを基に自分でファイルを作ることも出来るでしょう。
=LAMBDA(array,cellstyle,title,titleStyle,borderFlag,size,stretch,
LET(
colCount, COLUMNS(array),
formatCell, LAMBDA(cell,
IF(cellstyle = "(省略)",
cell,
IF(cellstyle = "\verb",
cellstyle & "'" & cell & "'",
cellstyle & "{" & cell & "}"
)
)
),
colSpec, IF(borderFlag = 1,
"|" & TEXTJOIN("|", TRUE, MID(REPT("c", colCount), SEQUENCE(colCount), 1)) & "|",
REPT("c", colCount)
),
rowText, TEXTJOIN(CHAR(10), TRUE,
BYROW(array, LAMBDA(row,
IF(borderFlag = 1, "\hline ", "") &
TEXTJOIN(" & ", TRUE, BYCOL(row, formatCell)) & " \\"
))
),
titleFormatted, IF(titleStyle = "(省略)",
title,
IF(titleStyle = "\verb",
titleStyle & "'" & title & "'",
"\text{" & titleStyle & "{" & title & "}}"
)
),
eqBody, titleFormatted & " \\" & CHAR(10) &
"\begin{array}{" & colSpec & "}" & CHAR(10) &
rowText & CHAR(10) &
IF(borderFlag = 1, "\hline" & CHAR(10), "") &
"\end{array}",
stretchDef, IF(stretch="(省略)", "", "\def\arraystretch{" & stretch & "}" & CHAR(10)),
sizeCmd, IF(size="(省略)", "", size & CHAR(10)),
katex, "$$" & CHAR(10) & stretchDef & sizeCmd & eqBody & CHAR(10) & "$$",
katex
)
)($A$12#,$B$9,$C$10,$B$10,$B$8,$B$7,$B$6)Google スプレッドシートのファイル入手
⚠️Googleドライブが使える環境が必要です。
👆これをクリックすると、《閲覧のみ》の状態でファイルが📖開きます。
📖開いたら、[ ファイル ] → [ コピーを作成 ] で、自分のGoogleドライブに📥保存します。
📥保存したファイルを開いたら、へ進んでください。
使用している名前付き関数を公開します。
これをGeminiなどに投げて何の関数なのか聞くと、色々教えてくれます。
ファイルの📥ダウンロードに抵抗がある方は、これを基に自分でファイルを作ることも出来るでしょう。
関数名：KATEX_TABLE
引数名：array,cellstyle,title,titleStyle,borderFlag,size,stretch
数式の定義：
=LET(
range, array,
colCount, COUNTIF(BYCOL(range, LAMBDA(col, COUNTBLANK(col) < ROWS(range))), TRUE),
rowCount, COUNTIF(BYROW(range, LAMBDA(row, COUNTBLANK(row) < COLUMNS(range))), TRUE),
arr, ARRAY_CONSTRAIN(range, rowCount, colCount),
colSpec, IF(borderFlag = 1, "|" & TEXTJOIN("|", TRUE, MAKEARRAY(1, colCount, LAMBDA(r, c, "c"))) & "|",
TEXTJOIN("", TRUE, MAKEARRAY(1, colCount, LAMBDA(r, c, "c")))
),
formattedTitle, IF(titleStyle="(省略)", title,
IF(titleStyle="\verb", titleStyle & "'" & title & "'",
"\text{" & titleStyle & "{" & title & "}}")
),
formattedStretch, IF(stretch="(省略)", "", "\def\arraystretch{" & stretch & "}" & CHAR(10)),
formattedSize, IF(size="(省略)", "", size & CHAR(10)),
formatCell, LAMBDA(cell,
IF(cellstyle="(省略)", cell,
IF(cellstyle="\verb", cellstyle & "'" & cell & "'",
cellstyle & "{" & cell & "}")
)
),
rowText, TEXTJOIN(CHAR(10), TRUE,
BYROW(arr,
LAMBDA(row,
IF(borderFlag=1, "\hline ", "") &
TEXTJOIN(" & ", TRUE,
BYCOL(row, formatCell)
) & " \\"
)
)
),
latexBody,
"$$" & CHAR(10) &
formattedStretch &
formattedSize &
formattedTitle & " \\" & CHAR(10) &
"\begin{array}{" & colSpec & "}" & CHAR(10) &
rowText & CHAR(10) &
IF(borderFlag=1, "\hline" & CHAR(10), "") &
"\end{array}" & CHAR(10) & "$$",
latexBody
)
関数使用例：
=KATEX_TABLE(DataArray,$B$8,$C$9,$B$9,$B$7,$B$6,$B$5)作成手順
ExcelとGoogleスプレッドシートで画面が少し違いますが、作成手順は同じです。
✅黄色のセルに配列参照で入力
入力例
〔Excelの場合〕
=sheet1!B2:D6
〔Googleスプレッドシートの場合〕
=ARRAYFORMULA('シート1'!B2:D6)
✅桃色のセルをコピー
✅noteに貼り付け
とりあえず、これだけで表が出来ます。
以下は、好みの見た目に仕上げるためのものです。
１．緑色のセルの値をリストから選択
改行間隔
\def\arraystretch で行の間隔を変えます。省略は1.0と同じ。1.0だと横罫線を引いた時に、窮屈に感じる事があります。1.2～1.5あたりがおすすめです。
文字サイズ
省略は、\normalsizeと同じ。\normalsizeだとnoteの標準の文字より若干大きいです。\small、\footnotesize、\scriptsize、\tinyの順に小さくなります。
\normalsizeで大きいと感じる時は、\smallがいいでしょう。文字を大きくしたい方はあまりいないかも知れませんが、\Hugeまでのサイズを選べます。
罫線
0:無し または 1:有り を選択します。
部分的に罫線を引きたい場合は、どちらかで生成してnoteに貼り付けた後、note上で修正します。
書体
こだわりが無ければ、省略で構いません。
⚠️データに、 などの文字が含まれる場合は、思うような表示にならない事があります。その場合、\verb を選択するか、データを全角の や他の文字に変更してください。
２．青色のセルにタイトルを入力
タイトル
表の上部に、タイトルを入れることが出来ます。直接入力、セル参照どちらでも可。タイトルの書体も変更可能。
⚠️タイトルもデータ同様に、使用文字によっては上手く表示されません。
３．黄色のセルに配列参照形式で入力
データ欄
この欄には、データを直接入力しません。配列参照で黄色のセルに入力してください。配列参照により、列数や行数の指定が不要になります。
他のファイルの配列参照も可能。ですが付属シートへの、直接入力または他のファイルからコピーすることをお勧めします。または〔 表生成 〕のシート自体を他のファイルにコピーしてもOK！
黄色セルへの入力例
〔Excelの場合〕
=sheet1!B2:D6
〔Google spread sheetの場合〕
=ARRAYFORMULA('シート1'!B2:D6)
４．桃色のセルをコピー
桃色のセルに、KaTeXの文字列が生成されます。コピーして、noteに貼り付けるだけでOK！
書いた表を修正する
一から書こうとすると面倒ですが、を詳しく知らなくても、表の構造が出来上がった状態なら、修正は難しくありません。
⚠️不用意に修正して表示が崩れてしまうと、原因を見つけるのに時間が掛かって大変です。慣れないうちは、修正前にコピーを取ってバックアップするなどの対策を取りましょう。
表の文字の修正
表内の文字は、自在に修正、変更が可能です。{ }で囲まれた文字を変更出来ます。書体指定をしてない場合は、{ }がありません。そのまま変更します。
横罫線を任意の場所に引く
縦罫線と横罫線の書き方は異なります。
横罫線の有無は、\hline の有無です。横破罫線 \hdashline に変更することも出来ます。
縦罫線の有無と文字の配置の変更
\begin{array}の後ろの {ccc} または {|c|c|c|} といった文字列を変更します。
{ }の中には、の文字が入ります。は、セル内の文字の配置を変えられます。は縦罫線です。⚠️ l と | が似ているので注意しましょう。
文字の書体やサイズを変える
一部の文字だけ太字にしたい、といったことも可能です。全体の書体を \sf{…} にしていた場合、 \bf{…} に書き換えることで太字の書体に変更出来ます。
\begin{array} の前にあるサイズ指定によって、全体のサイズが決まります。ですが、セルごとに文字サイズ変更が可能です。例として \large\bf{…} は、文字を大きくして、さらに太字にします。
⚠️\verb’…’ の場合は少々面倒なので、他の書体に変えることをおすすめします。
例として、変更前と後の表を並べておきます。どこをどのように変更したかを見比べて、修正の参考にしてください。
修正前_桃色のセルからコピーした状態
修正後
修正前 コード表示
$$
\def\arraystretch{1.2}
\scriptsize
\text{\rm{2026FIFAワールドカップ アジア３次予選}} \\
\begin{array}{|c|c|c|c|c|c|c|c|c|c|}
\hline \sf{グループC} & \sf{順位} & \sf{試合数} & \sf{勝利} & \sf{引分} & \sf{敗戦} & \sf{得点} & \sf{失点} & \sf{得失差} & \sf{勝ち点} \\
\hline \sf{日本} & \sf{1} & \sf{10} & \sf{7} & \sf{2} & \sf{1} & \sf{30} & \sf{3} & \sf{27} & \sf{23} \\
\hline \sf{オーストラリア} & \sf{2} & \sf{10} & \sf{5} & \sf{4} & \sf{1} & \sf{16} & \sf{7} & \sf{9} & \sf{19} \\
\hline \sf{サウジアラビア} & \sf{3} & \sf{10} & \sf{3} & \sf{4} & \sf{3} & \sf{7} & \sf{8} & \sf{-1} & \sf{13} \\
\hline \sf{インドネシア} & \sf{4} & \sf{10} & \sf{3} & \sf{3} & \sf{4} & \sf{9} & \sf{20} & \sf{-11} & \sf{12} \\
\hline \sf{中国} & \sf{5} & \sf{10} & \sf{3} & \sf{0} & \sf{7} & \sf{7} & \sf{20} & \sf{-13} & \sf{9} \\
\hline \sf{バーレーン} & \sf{6} & \sf{10} & \sf{1} & \sf{3} & \sf{6} & \sf{5} & \sf{16} & \sf{-11} & \sf{6} \\
\hline
\end{array}
$$修正後 コード表示
$$
\def\arraystretch{1.4}
\scriptsize
\text{\small\bf{FIFAワールドカップ2026 アジア３次予選}} \\
\begin{array}{l|c:c:c:c:c:r:r:r:r}
\sf{グループC} & \sf{順位} & \sf{試合数} & \sf{勝利} & \sf{引分} & \sf{敗戦} & \sf{得点} & \sf{失点} & \sf{得失差} & \sf{勝ち点} \\
\hline \small\bf{日本} & \bf{1} & \bf{10} & \bf{7} & \bf{2} & \bf{1} & \bf{30} & \bf{3} & \bf{27} & \bf{23} \\
\sf{オーストラリア} & \sf{2} & \sf{10} & \sf{5} & \sf{4} & \sf{1} & \sf{16} & \sf{7} & \sf{9} & \sf{19} \\
\hdashline \sf{サウジアラビア} & \sf{3} & \sf{10} & \sf{3} & \sf{4} & \sf{3} & \sf{7} & \sf{8} & \sf{-1} & \sf{13} \\
\sf{インドネシア} & \sf{4} & \sf{10} & \sf{3} & \sf{3} & \sf{4} & \sf{9} & \sf{20} & \sf{-11} & \sf{12} \\
\sf{中国} & \sf{5} & \sf{10} & \sf{3} & \sf{0} & \sf{7} & \sf{7} & \sf{20} & \sf{-13} & \sf{9} \\
\sf{バーレーン} & \sf{6} & \sf{10} & \sf{1} & \sf{3} & \sf{6} & \sf{5} & \sf{16} & \sf{-11} & \sf{6} \\
\end{array}
$$⚠️ うまく表示されない わからない
全ての環境下で動作確認を取るわけにはいかないので、思うようにいかないこともあるでしょう。技術的な問題は、AIに聞くのが早かったりします。でもAIの返答の意味が、さっぱり分からないこともありますよね。そんなときは出来る範囲内でお答えしますので、コメントをお待ちしています。
他にもある色々な表の載せ方
見た目とかにあまりこだわらないから、簡単に表を載せたいという方もいますよね。他の方が書いた、表を載せる方法を集めてみましたので、自分に合った方法を見つけてみてください。
