noteに表を貼る？ 張る？ 書く？ 方法を示すよ 👉 要するに noteに表示する方法

ｎｏｔｅは、表の機能が標準実装されていないので、表を載せる手段をあれこれと思案することになる。

表を作るのに最も使われているのは、Excelなどのスプレッドシートではないでしょうか。スプレッドシートで作った表を ｎｏｔｅに貼り付けたい場合、画像を貼り付けるのが手っ取り早い。罫線も色も、見たままを貼る事が出来る。

でも、ちょっと手直ししたい。なんて時にストレスだったりする。また、画像だと文字がつぶれてたり、ダークモードで見ると白バックがチカチカして、見づらかったりする。

そんな問題が、解決出来るかも知れません。

ここで紹介していくのは、$${KaTeX}$$の文字列を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(…) 〕としてください。これで使えるようになります。$${\Large\bf作成手順}$$へ進んでください。

桃色のセルに入っている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ドライブに📥保存します。

📥保存したファイルを開いたら、$${\Large\bf作成手順}$$へ進んでください。

使用している名前付き関数を公開します。
これを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上で修正します。

書体
こだわりが無ければ、省略で構いません。
⚠️データに、$${\undergroup{\verb’ #$%&{ }\^_ ’}}$$ などの文字が含まれる場合は、思うような表示にならない事があります。その場合、\verb を選択するか、データを全角の $${\undergroup{  ＃＄％＆｛ ｝＼ ＾＿   }}$$や他の文字に変更してください。

２．青色のセルにタイトルを入力

タイトル
表の上部に、タイトルを入れることが出来ます。直接入力、セル参照どちらでも可。タイトルの書体も変更可能。
⚠️タイトルもデータ同様に、使用文字によっては上手く表示されません。

３．黄色のセルに配列参照形式で入力

データ欄
この欄には、データを直接入力しません。配列参照で黄色のセルに入力してください。配列参照により、列数や行数の指定が不要になります。
他のファイルの配列参照も可能。ですが付属シートへの、直接入力または他のファイルからコピーすることをお勧めします。または〔 表生成 〕のシート自体を他のファイルにコピーしてもOK！
黄色セルへの入力例
〔Excelの場合〕
　　=sheet1!B2:D6
〔Google spread sheetの場合〕
　　=ARRAYFORMULA('シート1'!B2:D6) 

４．桃色のセルをコピー

桃色のセルに、KaTeXの文字列が生成されます。コピーして、noteに貼り付けるだけでOK！

書いた表を修正する

一から書こうとすると面倒ですが、$${\KaTeX}$$を詳しく知らなくても、表の構造が出来上がった状態なら、修正は難しくありません。
⚠️不用意に修正して表示が崩れてしまうと、原因を見つけるのに時間が掛かって大変です。慣れないうちは、修正前にコピーを取ってバックアップするなどの対策を取りましょう。

表の文字の修正
表内の文字は、自在に修正、変更が可能です。{ }で囲まれた文字を変更出来ます。書体指定をしてない場合は、{ }がありません。そのまま変更します。

横罫線を任意の場所に引く
縦罫線と横罫線の書き方は異なります。
横罫線の有無は、\hline の有無です。横破罫線 \hdashline に変更することも出来ます。

縦罫線の有無と文字の配置の変更
\begin{array}の後ろの {ccc} または {|c|c|c|} といった文字列を変更します。
{ }の中には、$${\undergroup{\sf{  l  c  r  |  :  }}}$$の文字が入ります。$${\undergroup{\sf{  l  c  r  }}}$$は、セル内の文字の配置を変えられます。$${\undergroup{\sf{  |  :  }}}$$は縦罫線です。⚠️ l と | が似ているので注意しましょう。

$$
\def\arraystretch{1.2}
\small
\begin{array}{r|c:l}
& 横罫線\verb!👇 \hline! & \\ \hline
\text{l} & \text{左寄せ❘⇦　　　　　　 } & \\ 
\text{c} & \text{⇨❘中央寄せ❘⇦} & \\ 
\text{r} & \text{　　　　　　 ⇨❘右寄せ} & \\ 
\text{|} & \text{}\hspace{-7pt}\text{👈縦罫線　　　　　　 } & \\
\text{:} & & \text{}\hspace{-54pt}{縦破罫線👉} \\
\hdashline & 横破罫線\verb!👆 \hdashline! &
\end{array}
$$

文字の書体やサイズを変える
一部の文字だけ太字にしたい、といったことも可能です。全体の書体を \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}
$$

修正前　コード表示

$$
\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の返答の意味が、さっぱり分からないこともありますよね。そんなときは出来る範囲内でお答えしますので、コメントをお待ちしています。

他にもある色々な表の載せ方

見た目とかにあまりこだわらないから、簡単に表を載せたいという方もいますよね。他の方が書いた、表を載せる方法を集めてみましたので、自分に合った方法を見つけてみてください。

$${\footnotesize\bf{この記事が参加している企画}}$$

$${\boxed{\fbox{\footnotesize＃}{\scriptsize\bf{🔯KaTeX魔術}}\hspace{53pt}\tiny\raisebox{1pt}{\textrm{1.7320508...}}}}$$

$${\boxed{\fbox{\LARGE＃}{\LARGE\bf{💗スキれ❣}}\hspace{10pt}\tiny\raisebox{3pt}{\textrm{無量大数件}}}}$$