You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
7.3 KiB
284 lines
7.3 KiB
4 years ago
|
////
|
||
|
Included in:
|
||
|
|
||
|
- user-manual: tables: columns
|
||
|
////
|
||
|
|
||
|
[#cols]
|
||
|
=== Columns
|
||
|
|
||
|
The number of columns in a table is determined by the number of cells found in the first non-blank line after the table delimiter (`|===`) or by the values assigned to the `cols` attribute.
|
||
|
|
||
|
For example, the syntax in the two examples below will both converted to a table with two columns.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
include::ex-table.adoc[tag=2col-alt]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with two columns as defined by the number of cells in the first row
|
||
|
[width="90"]
|
||
|
include::ex-table.adoc[tag=2col-alt]
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
include::ex-table.adoc[tag=2col]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with two columns as defined by the `cols` attribute
|
||
|
[width="90"]
|
||
|
include::ex-table.adoc[tag=2col]
|
||
|
|
||
|
When a single number is assigned to the cols attribute, its value indicates the number of columns.
|
||
|
Each column will be the same width.
|
||
|
However, the number of columns can also be assigned as a comma delimited list.
|
||
|
The number of entries in the list determines the number of columns.
|
||
|
|
||
|
The comma delimited list below creates a table with four columns of equal width.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="1,1,1,1"]
|
||
|
----
|
||
|
|
||
|
This syntax provides that same result:
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="4*"]
|
||
|
----
|
||
|
|
||
|
Now, let's talk about that asterisk in the syntax above.
|
||
|
|
||
|
[#cols-format]
|
||
|
=== Column Formatting
|
||
|
|
||
|
The AsciiDoc syntax provides a variety of ways to control the size, style and layout of content within columns.
|
||
|
These *specifiers* can be applied to whole columns.
|
||
|
|
||
|
To apply a specifier to a column, you must set the `cols` attribute and assign it a value.
|
||
|
A column specifier can contain any of the following components:
|
||
|
|
||
|
* multiplier
|
||
|
* align
|
||
|
* width
|
||
|
* style
|
||
|
|
||
|
Each component is optional.
|
||
|
|
||
|
The multiplier operator (`+*+`) is used when you want a specifier to apply to more than one consecutive column.
|
||
|
If used, the multiplier must always be placed at the beginning of the specifier.
|
||
|
|
||
|
For example:
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
include::ex-table.adoc[tag=indv-co]
|
||
|
----
|
||
|
<1> The table will consist of three columns, as indicated by the *3*. The `+*+` operator ensures that the default layout and style will be applied to all of the columns.
|
||
|
|
||
|
.Result: Rendered table with multiplier applied
|
||
|
[width="90"]
|
||
|
include::ex-table.adoc[tag=indv]
|
||
|
|
||
|
[#cols-align]
|
||
|
The alignment component allows you to horizontally or vertically align a column's content.
|
||
|
Content can be horizontally aligned left (`<`), center (`+^+`), or right (`>`).
|
||
|
|
||
|
To horizontally center the content in all of the columns, add the `+^+` operator after the multiplier.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="3*^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with horizontal, center alignment applied to all columns
|
||
|
[width="90"]
|
||
|
[cols="3*^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
What if you only want to center the content in the last column?
|
||
|
Assign the default styles to the preceding columns, and `+^+` to the last column in a comma separated list.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="2*,^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with horizontal, center alignment applied to last column
|
||
|
[width="90"]
|
||
|
[cols="2*,^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
Let's specify a different horizontal alignment for each column.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="<,^,>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with a different horizontal alignment for each column
|
||
|
[width="90"]
|
||
|
[cols="<,^,>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
You'll notice that the content in the examples above is only centered on the horizontal.
|
||
|
It can also be aligned vertically when the alignment operator is prefixed with a dot (`.`).
|
||
|
Content can be vertically aligned to the top (`<`), middle (`+^+`), or bottom (`>`) of a cell.
|
||
|
|
||
|
To vertically align the content to the middle of the cells in all of the columns, add a `.` and then the `+^+` operator after the multiplier.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="3*.^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with vertical, middle alignment applied to all columns
|
||
|
[width="90"]
|
||
|
[cols="3*.^"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
If you only want to align the content to the bottom of each cell in the last column, you'd assign the default styles to the preceding columns, and `>` to the last column in a comma separated list.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="2*,.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with vertical, bottom alignment applied to last column
|
||
|
[width="90"]
|
||
|
[cols="2*,.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
Let's specify a different vertical alignment for each column.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols=".<,.^,.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with a different vertical alignment for each column
|
||
|
[width="90"]
|
||
|
[cols=".<,.^,.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
Finally, we'll also horizontally center the content in the last column.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols=".<,.^,^.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with a different vertical alignment for each column and horizontal, center alignment in the last column
|
||
|
[width="90"]
|
||
|
[cols=".<,.^,^.>"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
When both a horizontal and vertical alignment is assigned to a column, the horizontal alignment operator must precede the vertical operator.
|
||
|
|
||
|
The width component sets the width of a column.
|
||
|
Its value can be a proportional integer (the default is 1) or a percentage (1 to 99).
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="1,2,6"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Table rendered with column sizes adjusted by a proportional integer
|
||
|
[cols="1,2,6"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
When assigning percentage values to the cols attribute, you do not need to include the percent sign (`%`).
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="50,20,30"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
----
|
||
|
|
||
|
.Result: Table rendered with column sizes adjusted by a percentage
|
||
|
[cols="50,20,30"]
|
||
|
include::ex-table.adoc[tag=base]
|
||
|
|
||
|
Let's create a table with custom widths and alignments.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols=".<2,.^5,^.>3"]
|
||
|
include::ex-table.adoc[tag=base-xtr]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with variable widths and alignments
|
||
|
[cols=".<2,.^5,^.>3"]
|
||
|
include::ex-table.adoc[tag=base-xtr]
|
||
|
|
||
|
[#cols-style]
|
||
|
The style component must always be located at the end of the specifier.
|
||
|
When no style name is provided column contents will be processed as regular inline text.
|
||
|
|
||
|
The column styles are described in the table below.
|
||
|
|
||
|
[cols="20,30m,50"]
|
||
|
|===
|
||
|
|Style Name |Value |Description
|
||
|
|
||
|
|AsciiDoc
|
||
|
|a
|
||
|
|Supports block-level elements (paragraphs, delimited blocks, and block macros).
|
||
|
This style effectively creates a nested, standalone AsciiDoc document.
|
||
|
Implicit attributes such as doctitle from the parent document will be shadowed.
|
||
|
Custom attributes are inherited.
|
||
|
|
||
|
|Emphasis
|
||
|
|e
|
||
|
|Text is italicized
|
||
|
|
||
|
|Header
|
||
|
|h
|
||
|
|Header styles are applied to the column
|
||
|
|
||
|
|Literal
|
||
|
|l
|
||
|
|Column content is treated as if it were inside a literal block
|
||
|
|
||
|
|Monospaced
|
||
|
|m
|
||
|
|Text is rendered in monospaced font
|
||
|
|
||
|
|None (default style)
|
||
|
|d
|
||
|
|Text is handled like a normal paragraph.
|
||
|
Supports all markup (i.e., inline formatting, inline macros) that is permitted in a paragraph.
|
||
|
|
||
|
|Strong
|
||
|
|s
|
||
|
|Text is bolded
|
||
|
|
||
|
|Verse
|
||
|
|v
|
||
|
|Column content is treated as if it were inside a verse block
|
||
|
|===
|
||
|
|
||
|
Let's apply the header style to the first column, the monospaced style to the second, the strong style to the third, and the emphasis style to the fourth.
|
||
|
|
||
|
[source]
|
||
|
----
|
||
|
[cols="h,m,s,e"]
|
||
|
include::ex-table.adoc[tag=4col]
|
||
|
----
|
||
|
|
||
|
.Result: Rendered table with a header, monospaced, and strong styled column
|
||
|
[width="90"]
|
||
|
[cols="h,m,s,e"]
|
||
|
include::ex-table.adoc[tag=4col]
|
||
|
|
||
|
Specifiers can also be applied to individual cells.
|