Editing Module:AutosortTable/doc (section)

=== Styling tricks ===
While there appear to be no ways to style an individual cell when using this module, styling particular rows, columns, or the entire table can be done using CSS.

==== Styling the table ====
The ''style'' argument allows the entire table to use a default styling. For example, <code>|style=width:70%; text-align:center;</code> would constrain the table width to 70% of the available window, and center the text (not including column and row headers) by default. When using multiple properties, the semicolon is necessary to separate them. Do ''not'' use the quotation marks ordinarily required in CSS or wikitable markup (as in <code>"|style=width:70%; text-align:center;"</code>), as it causes the CSS to be disregarded. A reminder: use CSS to constrain tables sparingly, as reduced font-size or unexpected table widths may cause [[MOS:ACCESS|accessibility]] problems or irritate readers.

==== Styling a row ====
An individual row can be styled separately by including CSS prior to the first data cell. Consider this example table:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends|rowheader=1
|header = -- Name -- Age -- Diet                    <!-- Table header -->
| -- Maria -- 36 -- Vegan                           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian                      <!-- Row 2 -->
| -- Julia -- 35 -- Meat                            <!-- Row 3 -->
| -- James -- 50 -- Vegan                           <!-- Row 4 -->
| background-color: #FFDDDD -- Henry -- 45 -- Meat  <!-- Row 5, with CSS -->
| -- Ireni -- 47 -- Fish, no meat                   <!-- Row 6 -->
|colstyle = -- text-align:left; -- text-align:right; --  --  --
}}
</syntaxhighlight>
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends|rowheader=1
|header = -- Name -- Age -- Diet                    <!-- Table header -->
| -- Maria -- 36 -- Vegan                           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian                      <!-- Row 2 -->
| -- Julia -- 35 -- Meat                            <!-- Row 3 -->
| -- James -- 50 -- Vegan                           <!-- Row 4 -->
| background-color: #FFDDDD -- Henry -- 45 -- Meat  <!-- Row 5, with CSS -->
| -- Ireni -- 47 -- Fish, no meat                   <!-- Row 6 -->
|colstyle = -- text-align:left; -- text-align:right; --  --  --
}}
The row for "Henry" gets a pink color ([[web colors#Hex triplet|#FFDDDD]]), while the row header appropriately retains the gray formatting wikitables use for headers.

==== Styling a column ====
An individual column can be styled separately by using CSS in the ''colstyle'' argument. In the '''Old friends''' example just above, the alignment has been set to <code>text-align:left;</code> and <code>text-align:right;</code>, respectively. Consider this similar table:
<syntaxhighlight lang="wikitext" style="overflow:auto;">
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends again|rowheader=1
|header = -- Name -- Age -- Diet    <!-- Table header -->
| -- Maria -- 36 -- Vegan           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian      <!-- Row 2 -->
| -- Julia -- 35 -- Meat            <!-- Row 3 -->
| -- James -- 50 -- Vegan           <!-- Row 4 -->
| -- Henry -- 45 -- Meat            <!-- Row 5 -->
| -- Ireni -- 47 -- Fish, no meat   <!-- Row 6 -->
|colstyle = --  -- font-weight:bold; color:brown -- background-color:yellow
}}
</syntaxhighlight>
{{#invoke:AutosortTable|create|class=wikitable plainrowheaders sortable|separator=--|order=2|numeric=2|descending=2|caption=Old friends again|rowheader=1
|header = -- Name -- Age -- Diet    <!-- Table header -->
| -- Maria -- 36 -- Vegan           <!-- Row 1 -->
| -- Peter -- 35 -- Vegetarian      <!-- Row 2 -->
| -- Julia -- 35 -- Meat            <!-- Row 3 -->
| -- James -- 50 -- Vegan           <!-- Row 4 -->
| -- Henry -- 45 -- Meat            <!-- Row 5 -->
| -- Ireni -- 47 -- Fish, no meat   <!-- Row 6 -->
|colstyle = --  -- font-weight:bold; color:brown -- background-color:yellow
}}
The "Age" column entries are now in bolded brown and no longer left-aligned as in the previous example. The "Diet" column here has the specified yellow background.