☰

改善 Latex 中表格的外观

tag-icon • tag-icon tables tabularx itemize
改善 Latex 中表格的外观

我在 Latex 中创建了一个表格来显示一些框架的比较数据。我该如何改善它的外观？

在此处输入图片描述

\begin{table}[ht]
\rowcolors{1}{gray!25}{white}
\centering
\begin{tabular}{|p{20mm}|p{25mm}|p{25mm}|p{25mm}|p{25mm}|}
\rowcolor{gray!40}
 & Flutter & React Native & NativeScript & Ionic
 \\ \hline
Wrapper/ Container & No & No & No & WebViews by Apache Cordova
\\ \hline
Other ways of accessing native APIs &
\begin{itemize}
  \item Built-in classes
  \item Third- party plugins
\end{itemize}
 & \begin{itemize}
  \item Built-in React APIs through JS
  \item Native modules
\end{itemize} & Plugins developed by NativeScript team through JS
 & Plugins are offered by Apache Cordova to access the native APIs of the device through WebViews
\\ \hline
Disadvantages & Not so many plugins in the ecosystem, so many need to be implemented & \begin{itemize}
  \item Core maintainers of modules may quit
  \item Knowledge of usage of native APIs for each platform
\end{itemize} & Knowledge of usage of native APIs for each platform if plugins need to be developed & Not direct access to native features of device because of WebViews
\\
\end{tabular}
\caption{Short comparison between the four cross platform mobile development frameworks. 
\parencite{ReactNativeFramework, NativeScript, MobileChallenges2013, IonicWebsite, FlutterFramework}}
\label{table:comparisonFrameworks}
\end{table}

答案1

我建议您使用一个tabularx环境，将宽度设置为\textwidth，五列都采用右对齐而不是完全对齐，并使用所有可用空间的定制itemize环境（mylist在下面的代码中调用）。

\hline我也不会使用垂直线来分隔列 - 它们是不需要的，并且除了在环境的最后之外我不会使用指令tabularx。

在此处输入图片描述

\documentclass{article}

\usepackage[english]{babel}
\usepackage[table]{xcolor}
\providecommand\parencite[1]{\#} % dummy definition

\usepackage{tabularx,ragged2e}
\newcolumntype{L}{>{\RaggedRight\arraybackslash\hspace{0pt}}X}
\newcolumntype{P}[1]{>{\RaggedRight}p{#1}}

\usepackage{enumitem}
\newlist{mylist}{itemize}{1} % create a bespoke itemize-like list
\setlist[mylist]{leftmargin=*,nosep,label=\textbullet}
\usepackage{etoolbox}
\BeforeBeginEnvironment{mylist}{\begin{minipage}[t]{\hsize}}
\AfterEndEnvironment{mylist}{\end{minipage}}

\hyphenation{web-views native-script} % provide additional hyphenation exceptions

\begin{document}
\begin{table}[ht]
\setlength\extrarowheight{2pt} % for a more open "look"
\rowcolors{1}{gray!25}{white}
\setlength\tabcolsep{5pt} % default: 6pt

%\centering % not needed
\begin{tabularx}{\textwidth}{ P{20mm} *{4}{L} }
\rowcolor{gray!40}
& Flutter & React Native & NativeScript & Ionic \\ 
%\hline
Wrapper\slash Container & No & No & No & WebViews by Apache Cordova \\ 
%\hline
Other ways of accessing native APIs &
  \begin{mylist}
  \item Built-in classes
  \item Third-party plugins
  \end{mylist} & 
  \begin{mylist}
  \item Built-in React APIs through JS
  \item Native modules
  \end{mylist} & 
  Plugins developed by NativeScript team through JS & 
  Plugins are offered by Apache Cordova to access the native APIs of the device through WebViews \\ 
%\hline
Disadvantages & Not so many plugins in the ecosystem, so many need to be implemented & 
  \begin{mylist}
  \item Core maintainers of modules may quit
  \item Knowledge of usage of native APIs for each platform
  \end{mylist} & 
  Knowledge of usage of native APIs for each platform if plugins need to be developed 
  & Not direct access to native features of device because of WebViews \\ 
\hline % <-- new
\end{tabularx}

\caption{Short comparison between the four cross platform mobile development frameworks. 
\parencite{ReactNativeFramework, NativeScript, MobileChallenges2013, IonicWebsite, FlutterFramework}}
\label{table:comparisonFrameworks}

\end{table}
\end{document}

附录解决 @pzorba75 提出的后续问题：提供etoolbox了指令\BeforeBeginEnvironment和\AfterEndEnvironment。上述代码中使用这两个指令将每个mylist环境“封装”在minipage环境中。封装会自动消除原本会插入到列表第一个之前\item和最后一个之下的空格\item。（如果您不使用minipage方法，则必须手动消除空格，如在Zarko 的类似回答。

该enumitem包实际上提供了before=...和after=...选项。因此，可以替换

\usepackage{enumitem}
\newlist{mylist}{itemize}{1} % create a bespoke itemize-like list
\setlist[mylist]{leftmargin=*,nosep,label=\textbullet}
\usepackage{etoolbox}
\BeforeBeginEnvironment{mylist}{\begin{minipage}[t]{\hsize}}
\AfterEndEnvironment{mylist}{\end{minipage}}

和

\usepackage{enumitem}
\newlist{mylist}{itemize}{1} % create a bespoke itemize-like list
\setlist[mylist]{leftmargin=*,nosep,label=\textbullet,
                 before=\begin{minipage}[t]{\hsize},
                 after=\end{minipage}}

输出与上面相同。

答案2

我宁愿有以下设计的表格：

在此处输入图片描述

编辑：

与您的表代码相比，我做了以下更改：

  • 通过使用geometry包及其默认的页面边框设置，文本宽度会增加。这样可以为表格列提供更多空间。因此，文本可以比宽度为 25 毫米的单元格更美观。
  • 对于表格环境，tabularx规定的表格宽度等于文本宽度。使用它，列的宽度会自动适应可用的文本宽度。
  • L使用\RaggedRightfrom包定义 列类型ragged2e。通过它，单元格的内容与单词的左对齐，必要时使用连字符。通过这种方式，单元格的内容具有统一的单词间距，看起来更美观
  • \small为了使单元格中的文本间距更好，使用字体大小。
  • 对于列表 ( itemize) 使用enumitem包，可以对列表进行简单的自定义。它etoolbox适用于表格（列表前后没有垂直空间，项目之间没有垂直空间，最小化左列表边框）
  • 表格规则来自booktabs包。它们的数量也减少
    到最小（三个）。表格中的行由垂直空间分隔，由以下因素决定\addlinspace
  • 省略了行的颜色（它们也不能很好地与booktabs包中的规则配合使用）
    \documentclass{article}
    \usepackage{geometry}
    \usepackage{ragged2e}
    \usepackage{booktabs, tabularx}
    \usepackage{enumitem}
    \usepackage{etoolbox}
    \AtBeginEnvironment{table}{%
    \setlist[itemize]{nosep,
                      leftmargin=*,
                      before=\vspace{-0.6\baselineskip},
                      after=\vspace{-\baselineskip}
                      }
                                }
    \hyphenation{dis-advant-ages native-script plug-ins} 

    \begin{document}
    \begin{table}[ht]
        \small
    \centering
    \begin{tabularx}{\linewidth}{@{} >{\RaggedRight\hsize=0.8\hsize}X
                                *{4}{>{\RaggedRight\hsize=1.05\hsize}X} @{}}
        \toprule
        & Flutter   & React Native  & NativeScript  & Ionic     \\
        \midrule
    Wrapper/ Container
        & No        & No            & No            & WebViews by Apache Cordova \\ \addlinespace
    Other ways of accessing native APIs &
    \begin{itemize}
      \item Built-in classes
      \item Third- party plugins
    \end{itemize}
                    &   \begin{itemize}
            \item Built-in React APIs through JS
            \item Native modules
            \end{itemize}   & Plugins developed by NativeScript team through JS
                                        & Plugins are offered by Apache Cordova to access the native APIs of the device through WebViews  \\
        \addlinespace
    Disadvantages & Not so many plugins in the ecosystem, so many need to be implemented
                    &   \begin{itemize}
      \item Core maintainers of modules may quit
      \item Knowledge of usage of native APIs for each platform
                        \end{itemize}   & Knowledge of usage of native APIs for each platform if plugins need to be developed
                                        & Not direct access to native features of device because of WebViews \\
                                            \bottomrule
    \end{tabularx}
    \caption{Short comparison between the four cross platform mobile development frameworks.
    %\parencite{ReactNativeFramework, NativeScript, MobileChallenges2013, IonicWebsite, FlutterFramework}
    }
    \label{table:comparisonFrameworks}
    \end{table}
    \end{document}

如果您不喜欢使用几何定义的较宽文本，请将其从序言中删除。表格将自动适应新的宽度。结果如下：

在此处输入图片描述

答案3

例如：

\documentclass[a4paper]{article}
\usepackage[english]{babel}

\usepackage[svgnames,table]{xcolor}
\usepackage{tabularx}
\usepackage{ragged2e}
\usepackage{enumitem}
\setlist{nosep,noitemsep,topsep=0pt,leftmargin=1em}
\usepackage{biblatex}
\addbibresource{biblatex-examples.bib}
\renewcommand\tabularxcolumn[1]{>{\RaggedRight}p{#1}}

\begin{document}

\begin{table}[ht]
    \rowcolors{1}{gray!25}{white}
    \centering
    \begin{tabularx}{\linewidth}{|>{\RaggedRight}p{12mm}|X|X|X|X|}\hline
        \rowcolor{gray!40}
        & Flutter & React Native & NativeScript & Ionic
        \\ \hline
        Wrapper/ Container & No & No & No & WebViews by Apache Cordova
        \\ \hline
        Other ways of accessing native APIs &
        \begin{itemize}
            \item Built-in classes
            \item Third- party plugins
        \end{itemize}
        & \begin{itemize}
            \item Built-in React APIs through JS
            \item Native modules
        \end{itemize} & Plugins developed by NativeScript team through JS
        & Plugins are offered by Apache Cordova to access the native APIs of the device through WebViews
        \\ \hline
        Disadvantages & Not so many plugins in the ecosystem, so many need to be implemented & 
        \begin{itemize}
            \item Core maintainers of modules may quit
            \item Knowledge of usage of native APIs for each platform
        \end{itemize} & Knowledge of usage of native APIs for each platform if plugins need to be 
        developed & 
        Not direct access to native features of device because of WebViews
        \\\hline
    \end{tabularx}
    \caption{Short comparison between the four cross platform mobile development frameworks. 
        \parencite{ReactNativeFramework, NativeScript, MobileChallenges2013, IonicWebsite, 
            FlutterFramework}}
    \label{table:comparisonFrameworks}
\end{table} 

\end{document}

在此处输入图片描述

答案4

在我看来，应该避免使用垂直规则，如果有水平规则或任何其他分隔符，则彩色行毫无意义，而应作为简单但美观的垂直空白空间。我建议这样做，此表不采用规则，也不采用颜色。

对于此表，项目符号非常不方便，因为会浪费水平空间，迫使段落变窄，更不用说表格和项目代码的混乱。处理源代码是一件痛苦的事，因为源代码的内容很难阅读。我制作了假项目以尽量减少这两个问题，但我建议简单地在段落之间留出一些空间。这就足够了。

由于有几列包含大量不同数量的文本，我认为没有必要保持列数相等，因此我在这里选择tabulary。 使用默认边距，结果可能是：

喵喵

无论如何，像这样的表格应该是横向的，因为窄列会在对齐的单词或过于粗糙和带连字符的文本之间造成很大的空间。

图片源代码：

\documentclass{article}
%\usepackage[showframe]{geometry}
%\usepackage[table]{xcolor}
\usepackage{booktabs,tabulary,array,parskip}
\begin{document}
\begin{table}
%\scriptsize
\def\item{\hangindent1em\textbullet~}
\tymin=0pt
\tymax=90pt
\begin{tabulary}{\linewidth}{p{2cm}LLLLL}
\toprule
    & Flutter & React Native & NativeScript & Ionic \\\midrule
Wrapper/ \mbox{Container} & No & No & No & WebViews by Apache Cordova\\\addlinespace
%\rowcolor{gray!10}
Other ways \par of accessing \par native APIs &
\item Built-in classes\par\smallskip
\item Third-party plugins
 &
\item Built-in React APIs through JS\par\smallskip
\item Native modules
& 
Plugins developed by NativeScript team through JS  & 
Plugins are offered by Apache Cordova to access the native APIs of the device through WebViews\\\addlinespace
Disadvantages & 
Not so many plugins in the ecosystem, so many need to be implemented & 
\item Core maintainers of modules may quit\par\smallskip
\item Knowledge of usage of native APIs for each platform

& Knowledge of usage of native APIs for each platform if plugins need to be developed & Not direct access to native features of device because of WebViews\\\bottomrule

\end{tabulary}

\caption{Short comparison between the four cross platform mobile development frameworks.}
\end{table}
\end{document}

相关内容