Pattern Library: Tables
Table: Two Column
A <table> containing a descriptive <caption>, and a <tbody> holding the rows and two columns.
| Syntax | Description |
|---|---|
| :nth-child(n) | nth child of parent |
| :nth-last-child(n) | nth child of parent counting backwards |
| :nth-of-type(n) | nth element of its type within parent |
| :nth-last-of-type(n) | nth element of its type counting backwards |
Usage:
These tables are used to organize sets of information in situations where a list-element would not be adequate. They are typically found in tutorials or other resource pages.
Markup
<table class="butlerWebDev__table">
<caption class="butlerWebDev__tableCaption">
Caption content goes here
</caption>
<tbody class="butlerWebDev__tableBody">
<tr class="butlerWebDev__tableTR>
<th scope="col" class="butlerWebDev__tableTH"> column name </th>
<th scope="col" class="butlerWebDev__tableTH"> column name </th>
</tr>
<tr class="butlerWebDev__tableTR>
<td class="butlerWebDev__tableTD butlerWebDev__tableTD--bold"> data here </td>
<td class="butlerWebDev__tableTD"> data here </td>
</tr>
<tr class="butlerWebDev__tableTR>
<td class="butlerWebDev__tableTD butlerWebDev__tableTD--bold"> data here </td>
<td class="butlerWebDev__tableTD"> data here </td>
</tr>
</tbody>
</table>
Table: Three Column
A <table> containing a descriptive <caption>, and a <tbody> holding the rows and three columns. Additional <td> elements could be added to increase the number of columns as needed, but the website mainly has tables with only two or three.
| Selector | Syntax | Description |
|---|---|---|
| Descendant | #main li | selects elements only when they are descendants of a higher-level element |
| Adjacent sibling | h2+p | selects sibling element that is adjacent to (next to) another element |
| Child | blockquote>p | selects elements only when they are child elements of the parent element |
| General Sibling | h2~p | selects any elements that are siblings to another element |
Usage:
These tables are used to organize sets of information in situations where a list-element would not be adequate. They are typically found in tutorials or other resource pages.
Markup
<table class="butlerWebDev__table">
<caption class="butlerWebDev__tableCaption">
Caption content goes here
</caption>
<tbody class="butlerWebDev__tableBody">
<tr class="butlerWebDev__tableTR>
<th scope="col" class="butlerWebDev__tableTH"> column name </th>
<th scope="col" class="butlerWebDev__tableTH"> column name </th>
<th scope="col" class="butlerWebDev__tableTH"> column name </th>
</tr>
<tr class="butlerWebDev__tableTR>
<td class="butlerWebDev__tableTD"> data here </td>
<td class="butlerWebDev__tableTD butlerWebDev__tableTD--bold"> data here </td>
<td class="butlerWebDev__tableTD"> data here </td>
</tr>
<tr class="butlerWebDev__tableTR>
<td class="butlerWebDev__tableTD"> data here </td>
<td class="butlerWebDev__tableTD butlerWebDev__tableTD--bold"> data here </td>
<td class="butlerWebDev__tableTD"> data here </td>
</tr>
</tbody>
</table>