display | more...

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_IDQualitative
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_IDAttributeValuesDefinitionAnnotation
1alignleft
center
right
Specifies the alignment of a table according to surrounding textEither <th align="l/c/r"> or <td align="l/c/r">
2bgcolorrgb(x,x,x)
#xxxxxx
colorname
Specifies the background color for a tableNot enabled for E2.
3border1
0
Specifies whether or not the table is being used for layout purposesWhen displaying data either omit or define 1.
<table border=0>
4cellpaddingpixelsSpecifies the space between the cell wall and the cell contentEmploy caution when using this attribute. A value that is too high may obstruct your data.
<table cellpadding=x>
5cellspacingpixelsSpecifies the space between cellsEmploy 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>
6colspan#Use this to make a single cell cross two columns worth of data.Either <th colspan="#"> or <td colspan="#">
7framevoid
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)>
8rowspan#Use this to make a single cell cross two columns worth of data.Either <th rowspan="#"> or <td rowspan="#">
9rulesnone
groups
rows
cols
all
Specifies which parts of the inside borders that should be visibleInterior table gridlines
<table rules=(select from list)>
10summarytextSpecifies a summary of the content of a tableDoes 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.
11valigntop
middle
bottom
baseline
Vertical aligns the content in a cellEither <th valign="l/c/r"> or <td valign="l/c/r">
12widthpixels
%
Specifies the width of a tableEmploy 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

Languages

Data

Comment

Facebook

Data

Comment

Twitter

Data

Comment

How I came to E2

Data

Comment

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>&#x265C;</b></big></big></big></big></td>
<th><big><big><big><big>&#x265E;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x265D;</b></big></big></big></big></td>
<th><big><big><big><big>&#x265B;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x265A;</b></big></big></big></big></td>
<th><big><big><big><big>&#x265D;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x265E;</b></big></big></big></big></td>
<th><big><big><big><big>&#x265C;</big></big></big></big></th>
</tr>

<tr>
<th><big><big><big><big>&#x265F;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x265F;</b></big></big></big></big></td>

<th><big><big><big><big>&#x265F;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x265F;</b></big></big></big></big></td>

<th><big><big><big><big>&#x265F;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x265F;</b></big></big></big></big></td>

<th><big><big><big><big>&#x265F;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x265F;</b></big></big></big></big></td>
</tr>

<tr>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
</tr>

<tr>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
</tr>

<tr>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
</tr>

<tr>
<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>

<th><big><big><big><big>&nbsp;&nbsp;&nbsp;&nbsp;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&nbsp;&nbsp;&nbsp;&nbsp;</b></big></big></big></big></td>
</tr>

<tr>
<td align=center><big><big><big><big><b>&#x2659;</b></big></big></big></big></td>
<th><big><big><big><big>&#x2659;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x2659;</b></big></big></big></big></td>
<th><big><big><big><big>&#x2659;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x2659;</b></big></big></big></big></td>
<th><big><big><big><big>&#x2659;</big></big></big></big></th>

<td align=center><big><big><big><big><b>&#x2659;</b></big></big></big></big></td>
<th><big><big><big><big>&#x2659;</big></big></big></big></th>
</tr>

<tr>
<th><big><big><big><big>&#x2656;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x2658;</b></big></big></big></big></td>

<th><big><big><big><big>&#x2657;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x2655;</b></big></big></big></big></td>

<th><big><big><big><big>&#x2654;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x2657;</b></big></big></big></big></td>

<th><big><big><big><big>&#x2658;</big></big></big></big></th>
<td align=center><big><big><big><big><b>&#x2656;</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)