How to show Table and Image Side by Side in AsciiDoc

Question

Unable to place the image and table side by side.

Table creates the nextline automatically, I have even tried nested tables, but didn't worked well. I would like to place those side by side.

Do we have any other way we can place those side by side.

Answer 1

AsciiDoc is a content markup language, not a content layout language. You can provide hints using roles that the output format can use to inform the presentation, but that's about it.

That said, the default styles provided for Asciidoctor HTML output do include left, center, and right roles that can achieve what you are looking for, with some caveats.

For example:

= Document

Lorem ipsum...

image:puppy.png["puppy", role="left"]

[%autowidth, cols="a,a", role="right"]
|===
| Product
| Description

| Grapple grommet
| A grommet that grapples.

| Thingamajig
| A whatchamacallit.

|===

Renders as:

The three things that make it work are:

• The image has role="left", which applies a CSS float: left style.
• The table has %autowidth, which means it doesn't span the entire content width by default.
• The table has role="right", which applies a CSS float: right style. This isn't strictly necessary.

The problem is that if the image and/or table are too wide for the available space, the table moves below the image.

Nested tables might work but can be more onerous to get right.

All other strategies required applying custom CSS to achieve the layout you want. See DocInfo Files for details on how to apply custom CSS.