Awesome Asciidoctor: Changing the Grid and Frame of Tables
We can change the frames and grid of tables we define in Asciidoctor. We use the frames attribute to change the outside frame of a table. We can choose between topbot for top and bottom, sides for only a frame at the sides of the table, none if we don't want a frame. The default value all create a frame around our table with top, sides and bottom.
To change the inner grid of a table we use the grids table attribute. The default value all displays a grid for columns and rows inside the table. The value cols only displays a grid between columns, value rows display a grid between rows and with value none there will be no grid inside our table.
The following Asciidoc sample shows the definition of four tables with different values for the cols table attribute:
.Table with top and bottom frame (topbot)
[frame="topbot"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with no frame (none)
[frame="none"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with only sides frame (sides)
[frame="sides"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with default frame (all)
[frame="all"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
When we generate output using the HTML backend we get the following result:
In the next sample we have four tables with different values for the cols attribute:
.Table with no grid (none)
[grid="none", frame="none"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with only columns grid (cols)
[grid="cols", frame="none"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with only rows grid (rows)
[grid="rows", frame="none"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
.Table with default rows and columns grid (all)
[grid="all", frame="none"]
|===
| Name | Description
| Asciidoctor
| Awesome way to write documentation
|===
And we get the following output when we transform this source to HTML:
Written with Asciidoctor 1.5.1.
