All parts of this HTML guide for Everything 2 include:
(all chapters) |
Tags and Starting New Lines |
Character Formatting |
Special Characters |
Lists |
Giving Credit Where Credit is Due |
Miscellaneous Tags |
EOF: Index and Information |
Tables |
(Quick Start)
A1: Tables
A1.1: How to create a table
Tables are a generally accepted best-practice for organizing and presenting both categorical (qualitative) and numerical (quantitative) data. Within HTML, tables work best to present content of this type: that is to say, data. Tables are not intended for, and should not be used for, managing the layout of a writeup on Everything2. Open and close each table with the <table> and </table> tags. Open and close each row with the <tr> and </tr> tags. Open and close each header field (darker background color, centered text, and bold) with the <th> and </th> tags. Open and close each data field (lighter background color, left align text by default) with the <td> and </td> tags. Everything else is style, personal preference, and aesthetics.
An example table, with caption
Row_ID | Qualitative Attribute A | Qualitative Attribute B | Quantitative Result | Units |
1 | | | | |
2 | | | | |
3 | | | | |
n | | | | |
That table was created with the following code:
<table>
<caption>An example table, with caption</caption>
<tr>
<th>Row_ID</th>
<th>Qualitative<Br>Attribute<br><em>A</em></th>
<th>Qualitative<br>Attribute<br><em>B</em></th>
<th>Quantitative<br>Result</th><th>[Dimensional Analysis|Units]</th>
</tr>
<tr>
<th>1</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>[and so on|n]</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
|
And that space to document the code was created with this code:
<table width=100%>
<tr>
<td>
<pre>
Within which I entered my table code, indented the corresponding pairs of tags, and replaced
the greater than and less than signs with unicode.
</pre>
</td>
</tr>
</table>
|
And the space created to document the code documenting the table's documentation... oh, just view the page source, you voyeur, you.
A1.2: Table Attributes
Attributes - w3schools, accessed 1/15/2018
HTML Attributes for: Table | Row | Cell
Row_ID | Attribute | Values | Definition | Annotation |
1 | align | left center right | Specifies the alignment of a table according to surrounding text | Either <th align="l/c/r"> or <td align="l/c/r"> |
2 | bgcolor | rgb(x,x,x) #xxxxxx colorname | Specifies the background color for a table | Not enabled for E2. |
3 | border | 1 0 | Specifies whether or not the table is being used for layout purposes | When displaying data either omit or define 1. <table border=0> |
4 | cellpadding | pixels | Specifies the space between the cell wall and the cell content | Employ caution when using this attribute. A value that is too high may obstruct your data. <table cellpadding=x> |
5 | cellspacing | pixels | Specifies the space between cells | Employ caution when using this attribute. A value that is too high may look distracting to your audience or make the data difficult to read. <table cellspacing=x> |
6 | colspan | # | Use this to make a single cell cross two columns worth of data. | Either <th colspan="#"> or <td colspan="#"> |
7 | frame | void above below hsides lhs rhs vsides box border | Specifies which parts of the outside borders that should be visible |
No exterior border Top border only Bottom border only Horizontal sides Left Hand side Right Hand side Vertical sides All edges All edges <table frame=(select from list)> |
8 | rowspan | # | Use this to make a single cell cross two columns worth of data. | Either <th rowspan="#"> or <td rowspan="#"> |
9 | rules | none groups rows cols all | Specifies which parts of the inside borders that should be visible | Interior table gridlines <table rules=(select from list)> |
10 | summary | text | Specifies a summary of the content of a table | Does not appear to be enabled on E2. Recommend to use either a <p> tag (for white space and author selected alignment of text) or to use<caption> tag -- close it out mind you -- immediately after opening the <table> but prior to opening your first row with <tr> (there will be no white space, and the text will be center aligned versus the width of your table. |
11 | valign | top middle bottom baseline | Vertical aligns the content in a cell | Either <th valign="l/c/r"> or <td valign="l/c/r"> |
12 | width | pixels % | Specifies the width of a table | Employ caution here - not all screen resolutions will look the same as your browser/screen when creating your table. Recommended to omit or define at 100%. <table width=Z%> |
A1.3: How to call and nest attributes
Immediately below, find an example table making use of many of the attributes just introduced. The table is followed by a documentation pane. It is important to be aware that E2 will only 'read' your attribute HTML up until the first white space. As such, we cannot define two attributes for the same <table>, <th>, nor <td>. The first attribute to be defined will be rendered, and subsequent ones (such as my defined cellspacing=3 and joined-cell header text align="left") are not rendered.
An example table, illustrating use of many attributes
State |
City |
Fruits |
Arguable |
Vegetables |
Apple |
Orange |
Tomato |
Carrot |
Zuchinni |
Florida |
Miami |
42,500 |
97,250 |
27,740 |
18,500 |
48,000 |
Tampa |
14,000 |
22,500 |
7,250 |
5,500 |
16,250 |
Texas |
Austin |
122,350 |
22,500 |
86,500 |
26,750 |
54,250 |
Houston |
34,500 |
24,750 |
115,500 |
19,250 |
75,850 |
Attribute example table documentation
<table border=3 cellspacing=3>
<caption>An example table, illustrating use of many attributes</caption>
<tr>
<th rowspan=2>State</th>
<th rowspan=2>City</th>
<th colspan=2 align="left">Fruits</th>
<th align="center">Arguable</th>
<th colspan=2 align="right">Vegetables</th>
</tr>
<tr>
<th>[Apple]</th>
<th>[Orange]</th>
<th>[Tomato]</th>
<th>[Carrot]</th>
<th>[Zuchinni]</th>
</tr>
<tr>
<th rowspan=2>[Florida]</th>
<th>[Miami]</th>
<td align="left">42,500</td>
<td align="left">97,250</td>
<td align="center">27,740</td>
<td align="right">18,500</td>
<td align="right">48,000</td>
</tr>
<tr>
<th>[Tampa]</th>
<td align="left">14,000</td>
<td align="left">22,500</td>
<td align="center">7,250</td>
<td align="right">5,500</td>
<td align="right">16,250</td>
</tr>
<tr>
<th rowspan=2>[Texas]</th>
<th>[Austin]</th>
<td align="left">122,350</td>
<td align="left">22,500</td>
<td align="center">86,500</td>
<td align="right">26,750</td>
<td align="right">54,250</td>
</tr>
<tr>
<th>[Houston]</th>
<td align="left">34,500</td>
<td align="left">24,750</td>
<td align="center">115,500</td>
<td align="right">19,250</td>
<td align="right">75,850</td>
</tr>
</table>
|
A1.4: Common tables on Everything2
Preformatted area
<table width=50%>
<tr>
<td>
<pre>
You can formally distinguish documentation text from primary content
</pre>
</td>
</tr>
</table>
|
Site Trajectory
No, standard users cannot code the fancy green bars into a regular node. Yet.
Month to |
New writeups (surviving, not hidden) |
New users |
C!s spent |
C!:NW |
1/2018 |
96 |
|
150 |
|
298 |
|
3.10 |
12/2017 |
127 |
|
619 |
|
583 |
|
4.59 |
11/2017 |
504 |
|
495 |
|
619 |
|
1.23 |
10/2017 |
104 |
|
441 |
|
348 |
|
3.35 |
Site trajectory documentation
<table>
<caption><em>No, standard users cannot code the fancy green bars into a regular node. Yet.</em></caption>
<tr>
<th>Month to</th>
<th colspan='2'>New writeups (surviving, not hidden)</th>
<th colspan='2'>New users</th>
<th colspan='2'>C!s spent</th>
<th title='ratio of cools to new writeups'>C!:NW</th></tr>
<tr><td class="DateLabel"><b>1/2018</b></td>
<td>96</td>
<td><span class='bar' style='padding-right:2.13333333333333px;'> </span></td>
<td>150</td>
<td><span class='bar' style='padding-right:3.33333333333333px;'> </span></td>
<td>298</td>
<td><span class='bar' style='padding-right:6.62222222222222px;'> </span></td>
<td>3.10</td></tr>
<tr><td class="DateLabel">12/2017</td>
<td>127</td>
<td><span class='bar' style='padding-right:2.82222222222222px;'> </span></td>
<td>619</td>
<td><span class='bar' style='padding-right:13.7555555555556px;'> </span></td>
<td>583</td>
<td><span class='bar' style='padding-right:12.9555555555556px;'> </span></td>
<td>4.59</td></tr>
<tr><td class="DateLabel">11/2017</td>
<td>504</td>
<td><span class='bar' style='padding-right:11.2px;'> </span></td>
<td>495</td>
<td><span class='bar' style='padding-right:11px;'> </span></td>
<td>619</td>
<td><span class='bar' style='padding-right:13.7555555555556px;'> </span></td>
<td>1.23</td></tr>
<tr><td class="DateLabel">10/2017</td>
<td>104</td>
<td><span class='bar' style='padding-right:2.31111111111111px;'> </span></td>
<td>441</td>
<td><span class='bar' style='padding-right:9.8px;'> </span></td>
<td>348</td>
<td><span class='bar' style='padding-right:7.73333333333333px;'> </span></td>
<td>3.35</td></tr>
</table>
|
E2 Registries
Registry block documentation
<table width="100%" id='homenodetext' class=registries>
<tr>
<th>[Registries|Languages]</th>
<td><p>Data</p></td>
<td><p>Comment</p></td>
</tr>
<tr>
<th>[Registries|Facebook]</th>
<td><p>Data</p></td>
<d><p>Comment</p></td>
</tr>
<tr>
<th>[Registries|Twitter]</th>
<td><p>Data</p></td>
<td><p>Comment</p></td>
</tr>
<tr>
<th>[Registries|How I came to E2]</th>
<td><p>Data</p></td>
<td><>>Comment</p></td>
</tr>
</table>
|
Chessboard
♜ |
♞ |
♝ |
♛ |
♚ |
♝ |
♞ |
♜ |
♟ |
♟ |
♟ |
♟ |
♟ |
♟ |
♟ |
♟ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
♙ |
♙ |
♙ |
♙ |
♙ |
♙ |
♙ |
♙ |
♖ |
♘ |
♗ |
♕ |
♔ |
♗ |
♘ |
♖ |
Chessboard documentation
<table border=0>
<tr>
<td align=center><big><big><big><big><b>♜</b></big></big></big></big></td>
<th><big><big><big><big>♞</big></big></big></big></th>
<td align=center><big><big><big><big><b>♝</b></big></big></big></big></td>
<th><big><big><big><big>♛</big></big></big></big></th>
<td align=center><big><big><big><big><b>♚</b></big></big></big></big></td>
<th><big><big><big><big>♝</big></big></big></big></th>
<td align=center><big><big><big><big><b>♞</b></big></big></big></big></td>
<th><big><big><big><big>♜</big></big></big></big></th>
</tr>
<tr>
<th><big><big><big><big>♟</big></big></big></big></th>
<td align=center><big><big><big><big><b>♟</b></big></big></big></big></td>
<th><big><big><big><big>♟</big></big></big></big></th>
<td align=center><big><big><big><big><b>♟</b></big></big></big></big></td>
<th><big><big><big><big>♟</big></big></big></big></th>
<td align=center><big><big><big><big><b>♟</b></big></big></big></big></td>
<th><big><big><big><big>♟</big></big></big></big></th>
<td align=center><big><big><big><big><b>♟</b></big></big></big></big></td>
</tr>
<tr>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
</tr>
<tr>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
</tr>
<tr>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
</tr>
<tr>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
<th><big><big><big><big> </big></big></big></big></th>
<td align=center><big><big><big><big><b> </b></big></big></big></big></td>
</tr>
<tr>
<td align=center><big><big><big><big><b>♙</b></big></big></big></big></td>
<th><big><big><big><big>♙</big></big></big></big></th>
<td align=center><big><big><big><big><b>♙</b></big></big></big></big></td>
<th><big><big><big><big>♙</big></big></big></big></th>
<td align=center><big><big><big><big><b>♙</b></big></big></big></big></td>
<th><big><big><big><big>♙</big></big></big></big></th>
<td align=center><big><big><big><big><b>♙</b></big></big></big></big></td>
<th><big><big><big><big>♙</big></big></big></big></th>
</tr>
<tr>
<th><big><big><big><big>♖</big></big></big></big></th>
<td align=center><big><big><big><big><b>♘</b></big></big></big></big></td>
<th><big><big><big><big>♗</big></big></big></big></th>
<td align=center><big><big><big><big><b>♕</b></big></big></big></big></td>
<th><big><big><big><big>♔</big></big></big></big></th>
<td align=center><big><big><big><big><b>♗</b></big></big></big></big></td>
<th><big><big><big><big>♘</big></big></big></big></th>
<td align=center><big><big><big><big><b>♖</b></big></big></big></big></td>
</tr>
</table>
|
If there are other interesting, unique, or essential applications of tables on E2, please message the author or contact your friendly neighborhood editor for inclusion and documentation within this appendix.
Overview/Contents/Index | (Quick Start)