Tables

THE BUTTER

.w100
.tabulated
.spacedout
.bordered
.striped
.rich
.table-h

<table>
	<caption>Caption</caption>
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
</table>

Caption
Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell

Variables

Variables contributing to this table are the following

@table-th-border-color

Header border color

@table-td-border-color

Cell border color

@table-ft-border-color

Footer border color

@table-spaced

Padding of .spacedout table

@table-half-spaced

Padding of .rich table

@table-striped-bg-color

Cell background color in .striped table

@table-th-bg-color

Header and footer bg color of .rich table

Let's add width

.w100

Caption
Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell

Tabulated

Basic styling of underlines and footer overline. .tabulated.

<table class="w100 tabulated">
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
	<tfoot>
		<tr>
			<td>Footer</td>
			<td>Footer</td>
			<td class="txt-r">.txt-r Footer</td>
		</tr>
	</tfoot>
</table>

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Footer	Footer	.txt-r Footer

Space out

Add spacing between cells. .spacedout

<table class="w100 spacedout">
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
</table>

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell

Borders

Add borders around cells, with footer border top. .bordered

<table class="w100 bordered">
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
	<tfoot>
		<tr>
			<td>Footer</td>
			<td>Footer</td>
			<td class="txt-r">.txt-r Footer</td>
		</tr>
	</tfoot>
</table>

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Footer	Footer	.txt-r Footer

Let's add borders and spacing

.bordered.spacedout

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Footer	Footer	.txt-r Footer

Striped

The old fashioned way of identifying rows, .striped

<table class="w100 striped">
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
</table>

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell

Rich

All together, one shot, .rich

<table class="w100 rich">
	<tr>
		<th>Header</th>
		<th>Header</th>
		<th class="txt-r">.txt-r Header</th>
	</tr>
	<tr>
		<td>Cell</td>
		<td>Cell</td>
		<td class="txt-r">.txt-r Cell</td>
	</tr>
	<tfoot>
		<tr>
			<td>Foot</td>
			<td>Foot</td>
			<td class="txt-r">.txt-r Foot</td>
		</tr>
	</tfoot>
</table>

Header	Header	.txt-r Header
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Cell	Cell	.txt-r Cell
Foot	Foot	.txt-r Foot

Width

Use the .c-x defined in grid, to define percentage widths. Best if you define width in colgroup, as follows

And .md-x, .lg-x also apply.

<table class="tabulated spacedout w100">
	<colgroup>
		<col class="c-1 md-3">
		<col class="c-2">
		<col class="c-4">
		<col class="c-1">
		<col>
	</colgroup>
	<tr>
		<th>c-1 md-3</th>
		<th>c-2</th>
		<th>c-4</th>
		<th>c-1</th>
		<th>*</th>
	</tr>
	<tr>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
		<td>cell</td>
	</tr>
</table>

c-1 md-3	c-2	c-4	c-1	*
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell
cell	cell	cell	cell	cell

Bonus, horizonal

I need this during prototyping phases, a simple, straight forward, scrolling table. Wrap the table in .table-h

cell long more text