15

I created a table in Latex to show some comparison data about some frameworks. How can I improve its appearance?

enter image description here

\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}
  • never use vertical separators. – gented Jun 18 at 14:40
  • Kathrine, any news? You receive four answer ... Are not any of them acceptable to you? – Zarko Jun 24 at 7:24
  • For my situation, @Mico 's solution was better, although I preferred yours but the problem is the orientation is changing. – Kathrine Hanson Jun 25 at 9:22
12

I suggest you use a tabularx environment, with width set to \textwidth, ragged-right rather than full justification in all five columns, and a bespoke itemize-like environment (called mylist in the code below) that uses all available space.

I also wouldn't use vertical lines to separate the columns -- they're not needed, and I wouldn't use \hline directives except at the very end of the tabularx environment.

enter image description here

\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}

Addendum to address the follow-up query posted by @pzorba75: The etoolbox provides the instructions \BeforeBeginEnvironment and \AfterEndEnvironment. These two instructions are used in the code shown above to "encase" each mylist environment in a minipage environment. The encasing automatically eliminates the whitespace that would otherwise be inserted before the first \item and below the final \item of the list. (If you don't use the minipage approach, you'd have to eliminate the whitespace manually, as is done in Zarko's parallel answer.)

The enumitem package actually provides the before=... and after=... options. Thus, one could replace

\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}}

with

\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}}

The output is the same as above.

  • what does etoobox do in this document? – pzorba75 Jun 17 at 13:34
  • @pzorba75 - Please see the addendum I posted to address your follow-up query. – Mico Jun 17 at 13:50
19

I would rather have table with following design:

enter image description here

Edit:

In comparison with your table code I made the following changes:

  • With use of geometry package and its default settings for pages' borders the width of text width is increased. With this a more space for table columns are available. Consequently, the text can be in a more beautiful form than in cells with width of 25mm.
  • For table environment is used tabularx with prescribed table width equal to text width. Using it the width of columns are automatic adopted to available text width.
  • Defined is L column types with use of \RaggedRight from ragged2e package. By it cell's contents are aligned to the left hyphenation of words is used when necessary. By this the cells' contents have uniform inter words space and looks nicer
  • For better text spacing into cells the font size \small is used.
  • For lists (itemize) is used enumitem package which enable simple customizing of lists. With etoolbox it is adopted for use in tables (no vertical space before and after lists, no vertical spaces between items, minimized left lists borders)
  • Table rules are from booktabs package. Also their number is reduced
    to minimum (three). Rows in table are separated by vertical space determined by \addlinspace
  • Coloring of rows is omitted (they also don't work nicely with rules from booktabs package)
    \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}

If you not like to use wider text defined by geometry, than remove it from preamble. Table will automatic accommodate to new width. Result than will be the following:

enter image description here

  • 1
    @Mico Hi, thanks both for your help. I really like that solution but the problem is the whole orientation of the document is changed to portrait. How can I just make the orientation change only for tables? Thanks. – Kathrine Hanson Jun 17 at 13:52
  • 2
    @KathrineHanson - Zarko's proposed solution does not switch the table's orientation from portrait to landscape. However, the fact that the geometry package is loaded does increase the width of the table considerably. This increase in the width of the text block is not acceptable to you, right? – Mico Jun 17 at 13:58
6

For example:

\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}

enter image description here

  • 2
    This solution is not good since it changes the whole document's orientation from portrait to landscape. Thanks for your post. Another solution? – Kathrine Hanson Jun 17 at 12:58
  • 1
    Full justification in narrow columns can create very large and unattractive inter-word gaps. You may want to switch to ragged-right. – Mico Jun 17 at 13:24
  • 1
    @KathrineHanson - RedCloud's proposed doesn't employ landscape mode. However, it does widen the textblock considerably (via the use of the geometry package) considerably relative to the default of the article document class. – Mico Jun 17 at 13:53
  • 1
    The instruction \setlist{nosep,noitemsep,topsep=0pt,leftmargin=1em} has global scope and affects not only itemize but also enumerate environments. Can you think of a way to keep the scope of the \setlist instruction local to the table at hand? – Mico Jun 17 at 13:55
  • 2
    @Mico I am now implementing your solutiona and table looks much better thanks!!! – Kathrine Hanson Jun 17 at 14:03
5

IMHO opinion the vertical rules should be avoided and colored rows have no sense if there are horizontal rules or any other delimiter, as a simple but nice vertical empty space. I suggest this, without rules and without colors for this table.

For this table, bulleted items are quite inconvenient, because the waste of horizontal space, forcing narrower paragraphs, no not mention the mess of tabular and itemize code. It is a pain work with source where the contents are simply hard to read. I make fake items to minimize both problems but I suggest simply make paragraphs with some space between. That is enough.

with several columns with a lot of different amounts of text, I do not see any reason to maintain equal columns, so my election here is tabulary. With the default margins this could be the result:

mew

Anyway, a table like this should be in landscape, as narrow columns force huge spaces between justified words or an excessively ragged and hyphenated text.

Source code of the image:

\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}
  • +1. Some further suggestions: (i) load the ragged2e package; (ii) define \newcolumntype{M}{>{\RaggedRight\arraybackslash}L} and use 4 (not 5) M cols; (iii) change the first col. type from p{2cm} to >{\RaggedRight\hspace{0pt}}p{2cm} and replace Other ways \par of accessing \par native APIs with Other ways of accessing native APIs; (iv) set the value of \tabcolsep to, say, 4pt; (v) change \def\item{\hangindent1em\textbullet~} to \def\item{\par\hangindent1em\textbullet~} and get rid of the \par\smallskip` directives at the ends of each non-final \item. – Mico Jun 25 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.