Align Multiple Tables Side by Side

Align multiple tables side by side

Just put two data frames in a list, e.g.

t1 <- head(mtcars)[1:3]
t2 <- head(mtcars)[4:6]
knitr::kable(list(t1, t2))

Note this requires knitr >= 1.13.

Align multiple tables side by side using the flextable R package in R markdown

This works for me.

library(webshot)
flextable(pressure[1:7,])%>% set_caption(caption = "Table 1") %>% save_as_image("tmp1.png")
flextable(cars[1:5,])%>% set_caption(caption = "Table 2") %>% save_as_image("tmp2.png")
knitr::include_graphics(c("tmp1.png", "tmp2.png"))

Sample Image

How can I float two tables next to each other left to right and center them both?

You may want to use inline-block instead of float:

table.table_on_the_left, table.table_on_the_right {
  display:inline-block;
}

And to make the horizontal align text-align:center on the parent:

body {
  text-align:center;
}

Check this Demo

_{Here you can know more about inline-block}

Aside a recommendation plus if you are trying to set the layout for your page avoid to use <table> save it only for tabular data and instead use <div> and positioning.

HTML,CSS — How to horizontally center two tables side by side

You can use flexbox on the container div, apply justify-content: center; to center them, remove the floats and use a margin on one of the tables to create a distance between them.

.wrap {

  display: flex;

  align-items: center;

  justify-content: center;

}


table {

  border: 1px solid #555;

}

<div class="wrap">

        <table style="margin-right:10%;">

            <tr>

                <td>abc</td>

            </tr>

        </table>

        <table>

            <tr>

                <td>xyz</td>

            </tr>

            <tr>

                <td>xyz</td>

            </tr>

            <tr>

                <td>xyz</td>

            </tr>

        </table>

    </div>

HTML -- two tables side by side

Depending on your content and space, you can use floats or inline display:

<table style="display: inline-block;">

<table style="float: left;">

Check it out here: http://jsfiddle.net/SM769/

Documentation

CSS display on MDN - https://developer.mozilla.org/en/CSS:display
CSS float on MDN - https://developer.mozilla.org/en/CSS/float

Using CSS, trying to center and align multiple tables side by side

The floating divs for the center table are missing, shouldn't it be:

<div  class='cell-left'><table class='cell'><tr><td>
        CENTER1
    </td></tr></table></div>
    <table class='cell'><tr><td>
        CENTER2
    </td></tr></table>
    <div  class='cell-right'><table class='cell'><tr><td>
        CENTER3
    </td></tr></table></div>

But regardless of that, why not use one table for each level of structure instead of tables for each element.

See DEMO 1 for stacked tables.

See DEMO 2 for nested tables.

See DEMO 3 for nested tables with highlight features (try hover!).

See DEMO 4 for equal heights of all cells.

See DEMO 5 for adjusted widths of far left and far right cell and center cells spanning everything in between.

See DEMO 6 for adjusted widths of far left and far right cell and center cells are as small as possible.

Align two data.frames next to each other with knitr?

The development version of knitr (on Github; follow installation instructions there) has a kable() function, which can return the tables as character vectors. You can collect two tables and arrange them in the two cells of a parent table. Here is a simple example:

```{r two-tables, results='asis'}
library(knitr)
t1 = kable(mtcars, format='html', output = FALSE)
t2 = kable(iris, format='html', output = FALSE)
cat(c('<table><tr valign="top"><td>', t1, '</td><td>', t2, '</td><tr></table>'),
    sep = '')
```

You can also use CSS tricks like style="float: [left|right]" to float the tables to the left/right.

If you want to set cell padding and spacing, you can use the table attributes cellpadding / cellspacing as usual, e.g.

```{r two-tables, results='asis'}
library(knitr)
t1 = kable(mtcars, format='html', table.attr='cellpadding="3"', output = FALSE)
t2 = kable(iris, format='html', table.attr='cellpadding="3"', output = FALSE)
cat(c('<table><tr valign="top"><td>', t1, '</td>', '<td>', t2, '</td></tr></table>'),
    sep = '')
```

See the RPubs post for the above code in action.