Core HTML
Various Table Types
- The first table is just a set of rows with no headers. A border was added to the sides with a radious to make it appear to be a matrix.
- The second table is a plain table with headers. The table and entries have borders. The default padding and spacing is used.
- The third table has a fixed header that remains at the top of the window. The table rows have alternating colors. The thead element is used purely as a mechanism for styling/
- The fourth table contains colgroups for styling groups of columns and elements with rowspans that cover multiple rows.
- The fifth table is divided with thead, tbody, and tfoot elements that can be used to style the table. Header attributes are used to associate data with specific headers. The headers hve no visual effect, but they can be used by screen readers.
- The sixth table has thead, tbody, tfoot and colgroup elements that can be used for styling.
- The seventh and final example contains nested tables that diagram a neural network with two hidden layers.
TableExamples.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net HTML</title>
<style>
.cGifts th, .cGifts td {
text-align: center;
width:150px;
}
.cGifts {
background-color:gray;
}
.cFruits {
background-color:lightgray;
}
.cLG {
background-color:lightgray;
}
.cLetters tr:nth-child(even) {
background-color: #eeeeee;
}
.cLetters tr:nth-child(odd) {
background-color: #dddddd;
}
.cLetters th {
background-color: #ccffcc;
}
.cLetters thead {
position: sticky;
position: -webkit-sticky;
z-index: 999;
top: 0;
}
.cCW {
background-color:white;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li><h2>A Simple Table of Rows for a Matrix</h2>
<table cellspacing="0" cellpadding="10" border="0" style="border-width: 0px 2px;border-color: gray;border-style:solid;border-radius:4px;">
<tr><td>1</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>1</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>1</td></tr>
</table>
</li>
<li><h2>A Simple Table with Headers</h2>
<table class="cLG" border="3">
<tr class="cCW">
<th>Corporal Works of Mercy</th>
<th>Spiritual Works of Mercy</th>
</tr>
<tr>
<td>Feed the hungry</td>
<td>Counsel the doubtful</td>
</tr>
<tr>
<td>Give drink to the thirsty</td>
<td>Instruct the ignorant</td>
</tr>
<tr>
<td>Clothe the naked</td>
<td>Admonish sinners</td>
</tr>
<tr>
<td>Shelter the homeless</td>
<td>Comfort the afflicted</td>
</tr>
<tr>
<td>Visit the sick</td>
<td>Forgive offenses</td>
</tr>
<tr>
<td>Visit the imprisoned</td>
<td>Bear wrongs patiently</td>
</tr>
<tr>
<td>Bury the dead</td>
<td>Pray for the living and the dead</td>
</tr>
</table>
</li>
<li><h2>A Table with Alternating-Colored Rows and a Fixed Header</h2>
<table class="cLetters" border="3" cellspacing="0" cellpadding="5">
<caption>The Letters Written by Paul</caption>
<thead>
<tr class="cCW">
<th>Title</th><th>Recipient</th><th>Where</th><th>When</th>
</tr>
</thead>
<tr>
<td>Galations</td><td>The Church at Galatia</td><td>Antioch</td><td>AD 49</td>
</tr>
<tr>
<td>1 Thessalonians</td><td>The Church at Thessalonica</td><td>Corinth</td><td>AD 51</td>
</tr>
<tr>
<td>2 Thessalonians</td><td>The Church at Thessalonica</td><td>Corinth</td><td>AD 51</td>
</tr>
<tr>
<td>1 Corinthians</td><td>The Church at Corinth</td><td>Ephesus</td><td>AD 56</td>
</tr>
<tr>
<td>2 Corinthians</td><td>The Church at Corinth</td><td>Macedonia</td><td>AD 56</td>
</tr>
<tr>
<td>Romans</td><td>The Church at Rome</td><td>Corinth</td><td>AD 57</td>
</tr>
<tr>
<td>Ephesians</td><td>The Church at Ephesus</td><td>Rome</td><td>AD 60-1</td>
</tr>
<tr>
<td>Colossians</td><td>The Church at Colossae</td><td>Rome</td><td>AD 60-1</td>
</tr>
<tr>
<td>Philomon</td><td>Philomon at Colossae</td><td>Rome</td><td>AD 60-1</td>
</tr>
<tr>
<td>Philippians</td><td>The Church at Philippi</td><td>Rome</td><td>AD 62</td>
</tr>
<tr>
<td>1 Timothy</td><td>Timothy at Ephesus</td><td>Macedonia</td><td>AD 62-3</td>
</tr>
<tr>
<td>Titus</td><td>Titus at Crete</td><td>Corinth</td><td>AD 63</td>
</tr>
<tr>
<td>2 Timothy</td><td>Timothy at Ephesus</td><td>Rome</td><td>AD 67</td>
</tr>
</table>
</li>
<li><h2>A Table with Colgroups and Rowspans</h2>
<table cellspacing="0" cellpadding="5" border="3">
<caption>The Judges of Israel</caption>
<colgroup>
<col span="2" style="background-color:darkkhaki">
<col style="background-color:khaki">
<col style="background-color:lightgray">
</colgroup>
<tr style="background-color:white;">
<th>Name</th>
<th>Meaning</th>
<th>Tribe</th>
<th>Enemy</th>
</tr>
<tr>
<td>Othniel</td>
<td>Lion of God</td>
<td>Judah</td>
<td>Mesopotamians</td>
</tr>
<tr>
<td>Ehud</td>
<td>Strong</td>
<td>Bejamin</td>
<td>Moabites</td>
</tr>
<tr>
<td>Shamgar</td>
<td>Cupbearer</td>
<td>Unknown</td>
<td>Philistines</td>
</tr>
<tr>
<td>Deborah</td>
<td>Bee</td>
<td>Ephraim</td>
<td>Canaanites</td>
</tr>
<tr>
<td>Gideon</td>
<td>Cutting Down</td>
<td>Manasseh</td>
<td>Midianites</td>
</tr>
<tr>
<td>Tola</td>
<td>Scarlet</td>
<td>Issachar</td>
<td rowspan="2">Unknown</td>
</tr>
<tr>
<td>Jair</td>
<td>Lord Enlightens</td>
<td rowspan="2">Manasseh</td>
</tr>
<tr>
<td>Japhthah</td>
<td>He Opens</td>
<td>Philistines and Ammonites</td>
</tr>
<tr>
<td>Ibzan</td>
<td>Splendid</td>
<td>Judah</td>
<td rowspan="3">Unknown</td>
</tr>
<tr>
<td>Elon</td>
<td>Oak</td>
<td>Zebulun</td>
</tr>
<tr>
<td>Abdon</td>
<td>Service</td>
<td>Ephraim</td>
</tr>
<tr>
<td>Samson</td>
<td>Distinguished/Sun</td>
<td>Dan</td>
<td>Philistines</td>
</tr>
<tr>
<td>Eli</td>
<td>Exalted is the Lord</td>
<td rowspan="2">Levi</td>
<td>Family Strife</td>
</tr>
<tr>
<td>Samuel</td>
<td>Heard of God</td>
<td>National Strife</td>
</tr>
</table>
</li>
<li><h2>A Table with headers Attributes and Colspans</h2>
<table class="cGifts" cellspacing="0" cellpadding="5" border="3">
<caption>Theological Virtues and the Gifts of the Holy Spirit</caption>
<thead>
<tr style="background-color:white;">
<th id="idFaith">Faith</th>
<th id="idHope">Hope</th>
<th id="idCharity">Charity</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cLG" headers="idFaith idHope" colspan="2">Wisdom</td>
<td></td>
</tr>
<tr>
<td class="cLG" headers="idFaith idCharity">Understanding</td>
<td ></td>
<td class="cLG">Understanding</td>
</tr>
<tr>
<td></td>
<td class="cLG" headers="idHope idCharity" colspan="2">Counsel</td>
</tr>
<tr>
<td class="cLG" headers="idFaith">Fortitude</td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td class="cLG" headers="idHope">Knowledge</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td class="cLG" headers="idCharity">Piety</td>
</tr>
<tr>
<td class="cLG" headers="idFaith idHope idCharity" colspan="3">Fear of the Lord</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color:white;"><td colspan="3"> </td></tr>
</tfoot>
</table>
</li>
<li><h2>A Table with colgroup, thead, tbody, and tfoot Elements</h2>
<table class="cFruits" cellspacing="0" cellpadding="5" border="3">
<caption>The Fruits of the Holy Spirit</caption>
<colgroup>
<col style="background-color:white">
</colgroup>
<head>
<tr style="background-color:white">
<th></th>
<th>Prudence</th>
<th>Justice</th>
<th>Fortitude</th>
<th>Temperance</th>
</tr>
</head>
<tbody>
<tr>
<th>Faith</th>
<td>Modesty</td>
<td>Patience</td>
<td>Faithfulness</td>
<td>Self-control</td>
</tr>
<tr>
<th>Hope</th>
<td>Goodness</td>
<td>Peace</td>
<td>Joy</td>
<td>Gentleness</td>
</tr>
<tr>
<th>Charity</th>
<td>Generosity</td>
<td>Kindness</td>
<td>Charity</td>
<td>Chastity</td>
</tr>
</tbody>
</table>
<li><h2>Nested Tables</h2>
<table cellspacing="10" cellpadding="5" border="3" style="background-color:lightyellow;">
<tr><th class="cCW" colspan="2">Output Layer</th></tr>
<tr>
<td class="cLG">y<sub>1</sub></td><td class="cLG">y<sub>2</sub></td>
</tr>
<tr><th class="cCW" colspan="2">Hidden Layer 2</th></tr>
<tr>
<td class="cLG">
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<th colspan="2">Hidden<sup>2</sup><sub>1</sub></th>
</tr>
<tr>
<td>w<sup>2</sup><sub>11</sub></td><td>w<sup>2</sup><sub>21</sub></td>
</tr>
</table>
</td>
<td class="cLG">
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<th colspan="2">Hidden<sup>2</sup><sub>2</sub></th>
</tr>
<tr>
<td>w<sup>2</sup><sub>12</sub></td><td>w<sup>2</sup><sub>22</sub></td>
</tr>
</table>
</td>
</tr>
<tr><th class="cCW" colspan="2">Hidden Layer 1</th></tr>
<tr>
<td class="cLG">
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<th colspan="2">Hidden<sup>1</sup><sub>1</sub></th>
</tr>
<tr>
<td>w<sup>1</sup><sub>11</sub></td><td>w<sup>1</sup><sub>21</sub></td>
</tr>
</table>
</td>
<td class="cLG">
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<th colspan="2">Hidden<sup>1</sup><sub>2</sub></th>
</tr>
<tr>
<td>w<sup>1</sup><sub>12</sub></td><td>w<sup>1</sup><sub>22</sub></td>
</tr>
</table>
</td>
</tr>
<tr><th class="cCW" colspan="2">Input Layer</th></tr>
<tr>
<td class="cLG">x<sub>1</sub></td><td class="cLG">x<sub>2</sub></td>
</tr>
</table>
</li>
</ul>
</body>
</html>Output
© 2007–2025 XoaX.net LLC. All rights reserved.