☰

如何在以下表格環境中對齊事物？

tag-icon • tag-icon tikz-pgf
如何在以下表格環境中對齊事物？

我試圖按以下順序獲取以下內容：（a）左側的黑色文字（xx，yy，zz）應相對於右側的相關表格單元垂直對齊； (b) 左欄與右欄之間沒有太多的空間； (c) 這是一個棘手的問題：如您所見，在右側最低的一組框中，我試圖將 D 和 E 與 B 和 C 對齊，但由於某種原因，tikz 圖片被「裁剪」。

我應該提到在找到以下答案後我正在使用 tabularray：如何使單元格的文字垂直居中？

這是 MWE：

\documentclass{article}

\usepackage{tabularray}
\usepackage{tikz}

\begin{document}

\begin{tblr}{
colspec = {X[l,m]X[l,m]},
rowsep = 0pt,
colsep = 0pt
}

zz: & something \\

yy: & \begin{tikzpicture}[cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cgreen/.style={fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},corange/.style={fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm}]

\path  (0,0) node[cc] (A) {A} (2.3,0) node[cc] (B) {B} (4.6,0) node[cc] (C) {C};
\draw[->] (A)--(B);
\draw[->] (B)--(C);

\end{tikzpicture} \\

xx & \begin{tikzpicture}[cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cgreen/.style={align=center,fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},corange/.style={align=center,fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm}]


\path (2.3,0) node[cyellow] (AA) {D} (4.6,0) node[cgreen] (BB) {E};
\draw[->] (AA)--(BB);

\end{tikzpicture}

\end{tblr}

\end{document}

答案1

那這個呢？我使用了正常的tabular環境，將tikzpictures 置於數學模式並\vcenter對其進行了編輯。 結果

\documentclass{article}
\usepackage{tikz}

\begin{document}
\begin{tabular}{rl}
    zz: & something\\
    yy: & $\vcenter{\hbox{\begin{tikzpicture}[baseline=(current bounding box.center),cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cgreen/.style={fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},corange/.style={fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm}]
        \path  (0,0) node[cc] (A) {A} (2.3,0) node[cc] (B) {B} (4.6,0) node[cc] (C) {C};
        \draw[->] (A)--(B);
        \draw[->] (B)--(C);
    \end{tikzpicture}}}$ \\
    xx: & $\vcenter{\hbox{\begin{tikzpicture}[cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},cgreen/.style={align=center,fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},corange/.style={align=center,fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm}]
        \path (2.3,0) node[cyellow] (AA) {D} (4.6,0) node[cgreen] (BB) {E};
        \draw[->] (AA)--(BB);
    \end{tikzpicture}}}$
\end{tabular}
\end{document}

答案2

(a) 設定tikz圖片的基線。
(b) 使用Q列類型取代X.
(c) 在 A 下方畫一個不可見的節點，將 B 與 D 對齊，C 與 E 對齊。

我增加了盒子的高度只是為了演示。

\documentclass{article}

\usepackage{tabularray}
\usepackage{tikz}
\usetikzlibrary{positioning}

\begin{document}
    
    \begin{tblr}{
            colspec = {Q[l,m] Q[l,m]},
            rowsep = 0pt,
            colsep = 0pt
        }
        
        zz: & something \\
        
        yy: & \begin{tikzpicture}[
            cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm,minimum height=10mm},
            cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            cgreen/.style={fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            corange/.style={fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            baseline={(A.base)}
        ]
            
            \path  (0,0) node[cc] (A) {A} (2.3,0) node[cc] (B) {B} (4.6,0) node[cc] (C) {C};
            \draw[->] (A)--(B);
            \draw[->] (B)--(C);
            %\path node (yy) [left=of A, inner sep=0pt, rectangle, draw] {yy};
            
        \end{tikzpicture} \\
        
        xx & \begin{tikzpicture}[
            cc/.style={fill=blue!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            cyellow/.style={align=center,fill=yellow!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm,minimum height=10mm},
            cgreen/.style={align=center,fill=green!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            corange/.style={align=center,fill=orange!20,rounded corners=2pt,thick,inner sep=4,outer sep=0,minimum width=18mm},
            invisible/.style={inner sep=4,outer sep=0,minimum width=18mm},
            baseline={(AA.base)}
        ]
            
            
            \path (0,0) node[invisible] {} (2.3,0) node[cyellow] (AA) {D} (4.6,0) node[cgreen] (BB) {E};
            \draw[->] (AA)--(BB);
            
        \end{tikzpicture}
        
    \end{tblr}
    
\end{document}

在此輸入影像描述

答案3

  • 使用arrows.meta˛鏈條and定位`TikZ 庫
  • 常見的 tikz 風格定義
  • 短代碼 ...
\documentclass{article}

\usepackage{tabularray}
\usepackage{tikz}
\usetikzlibrary{arrows.meta,
                chains, 
                positioning}

\begin{document}

\tikzset{        
node distance = 0mm and 5mm,
  start chain = going right,
     N/.style = {fill=#1!20, rounded corners=2pt, anchor=base,
                 inner ysep=4mm, inner xsep=0mm, minimum width=18mm, 
                 on chain},
     N/.default = blue,
every edge/.append style = {-Straight Barb,}
        }
        
       
\begin{tblr}{colspec = {Q[l,m] Q[r,m, wd=64mm]},
              colsep = 1mm, rowsep  = 0pt}

zz: &   \SetCell{l} something \\
yy: &   \tikz[baseline=1pt]
        {\node[N] (a)   {A}; 
         \node[N] (b)   {B}; 
         \node[N] (c)   {C};
         \draw  (a) edge (b)    (b) edge (c);
         }  \\
xx: &    \tikz[baseline=1pt]
        {\node[N=yellow] (a)   {D};
         \node[N=green]  (b)   {E};
         \draw  (a) edge (b);
         }
\end{tblr}

\end{document}

編輯： 或使用join巨集來編寫更短的程式碼：

\documentclass{article}

\usepackage{tabularray}
\usepackage{tikz}
\usetikzlibrary{arrows.meta,
                chains,
                positioning}

\begin{document}

\tikzset{
node distance = 0mm and 5mm,
  start chain = going right,
     N/.style = {fill=#1!20, rounded corners=2pt, anchor=base,
                 inner ysep=4mm, inner xsep=0mm, minimum width=18mm,
                 on chain},
     N/.default = blue,
every join/.style = {-Straight Barb}    % <---
        }


\begin{tblr}{colspec = {Q[l,m] Q[r,m, wd=64mm]},
              colsep = 1mm, rowsep  = 0pt}

zz: &   \SetCell{l} something \\
yy: &   \tikz[baseline=1pt]
        {\node[N] (a)   {A};
         \node[N, join] {B};  % <---
         \node[N, join] {C};  % <---
         }  \\
xx: &    \tikz[baseline=1pt]
        {\node[N=yellow]        {D};
         \node[N=green, join]   {E};    % <---
         }
\end{tblr}
\end{document}

在這兩種情況下，您都會得到相同的結果：

在此輸入影像描述

附錄： 使用@Qrrbrbirlbel 回答我的[問題2使用庫的可能解決方案graphs可以是：

\documentclass{article}

\usepackage{tabularray}
\usepackage{tikz}
\usetikzlibrary{arrows.meta,
                graphs}

\begin{document}
    \begin{table}
    \centering
\tikzset{
     N/.style = {fill=#1!20, rounded corners=2pt, alias=N,
                 inner ysep=4mm, inner xsep=0mm, outer sep=0pt,
                 minimum width=18mm},
   N/.default = blue,
        }
\tikzgraphsset{
    branch right sep=5mm,
    every graph/.append style = {path, ->, /tikz/>=Straight Barb}}

\begin{tblr}{colspec = {Q[r] Q[r,wd=64mm]},
              colsep = 1mm, rowsep  = 0pt}
zz: &   \SetCell{l} something \\
yy: &   \tikz[baseline=(N.base)]    \graph{A[N],    B[N],   C[N]};  \\
xx: &   \tikz[baseline=(N.base)]    \graph{D[N=yellow], E[N=green]};
\end{tblr}
    \end{table}
\end{document}

編譯結果和之前幾乎一樣。

在此輸入影像描述

答案4

這是一個使用{NiceTabular}of nicematrix（以及箭頭的 Tikz）的解決方案。

\documentclass{article}
\usepackage{nicematrix,tikz}

\begin{document}

\NewDocumentCommand{\Fill}{m}{\Block[fill=#1,rounded-corners]{}}

\begin{NiceTabular}{rw{c}{2cm}cw{c}{2cm}cw{c}{2cm}}[cell-space-limits=3mm]
   xx: & something \\
   yy: & \Fill{blue!15} A && \Fill{blue!15} B && \Fill{blue!15} C  \\
   xx: &   && \Fill{yellow!15} D && \Fill{green!15} E \\
\CodeAfter
   \begin{tikzpicture} [->]
   \draw (2.5-|3) -- (2.5-|4) ;
   \draw (2.5-|5) -- (2.5-|6) ;
   \draw (3.5-|5) -- (3.5-|6) ;
   \end{tikzpicture}
\end{NiceTabular}

\end{document}

像往常一樣，nicematrix您需要進行多次編譯。

上述程式碼的輸出

相關內容