File last modified on August 18, 2022

Tables

All tables should have the epub:type="table" applied to the table tag, example:

html
1<table epub:type="table"></table>

Style name for the table should be

table | number of columns | col, example:

html
1<table epub:type="table" class="style"></table>

All tables should have an id, this id is what should be included in the toc.xhtml epub:type="lot". If a table doesn’t have a name applied by the content it should be named: chapter | increment example:

html
1<table epub:type="table" id="table.1.2" class="style"></table>

which if for chapter 1 table 2.

<p> tags should not be present in tables if minimal text is present and the style used for the <p> tag should be applied to the <td> tag.

Two column

HTML

html
1<table epub:type="table" id="table.1.1" class="table2col">
2  <tr>
3    <th>First name</th>
4    <th>Last name</th>
5  </tr>
6  <tr>
7    <td>John</td>
8    <td>Doe</td>
9  </tr>
10  <tr>
11    <td>Jane</td>
12    <td>Doe</td>
13  </tr>
14  <tr>
15    <td>Joel</td>
16    <td>Doe</td>
17  </tr>
18  <tr>
19    <td>Jesse</td>
20    <td>Doe</td>
21  </tr>
22</table>

CSS

css
1table.table2col {
2  width: 98%;
3  margin: 1em 1%;
4  border-collapse: collapse;
5  border: 1px solid #c1c3d1;
6}
7.table2col tr {
8  border-bottom: 1px solid #c1c3d1;
9  color: #666b85;
10}
11.table2col tr:nth-child(odd) td {
12  background-color: #ebebeb;
13}
14.table2col tr th {
15  font-family: 'Gotham Light', serif;
16  color: #d5dde5;
17  background-color: #1b1e24;
18  font-size: 1em;
19  padding: 0.5em;
20  text-align: center;
21  vertical-align: middle;
22  border-top: none;
23}
24.table2col td {
25  font-family: 'Adobe Garamond Pro', serif;
26  padding: 10px;
27  background: #ffffff;
28  text-align: left;
29  vertical-align: middle;
30  font-size: 1em;
31  border-right: 1px solid #c1c3d1;
32  letter-spacing: 0.01em;
33  width: 50%;
34}

Three column

HTML

html
1<table epub:type="table" id="table.1.2" class="table3col">
2  <tr>
3    <th>Foo</th>
4    <th>Bar</th>
5    <th>Cho</th>
6  </tr>
7  <tr>
8    <td>Bacon ipsum dolor amet shankle</td>
9    <td>Bacon ipsum dolor amet shankle</td>
10    <td>Bacon ipsum dolor amet shankle</td>
11  </tr>
12  <tr>
13    <td>Brisket meatball</td>
14    <td>Brisket meatball</td>
15    <td>Brisket meatball</td>
16  </tr>
17  <tr>
18    <td>Cupim shoulder short ribs</td>
19    <td>Cupim shoulder short ribs</td>
20    <td>Cupim shoulder short ribs</td>
21  </tr>
22</table>

CSS

css
1table.table3col {
2  width: 96%;
3  margin: 1em 2%;
4  border-collapse: collapse;
5  border: none;
6  border: 1px solid #ebebeb;
7}
8.table3col tr th {
9  font-family: 'Adobe Garamond Pro', serif;
10  background-color: #2980b9;
11  color: #ffffff;
12  padding: 0.5em;
13  letter-spacing: 0.04em;
14}
15.table3col tr {
16  background-color: #ffffff;
17}
18.table3col td {
19  font-family: 'Gotham Book';
20  font-size: 0.75em;
21  padding: 0.5em;
22  width: 25%;
23  border-right: 1px solid #ebebeb;
24}

Four column

HTML

html
1<table epub:type="table" id="table.1.3" class="table4col">
2  <tr>
3    <th>Product</th>
4    <th>Unit Price</th>
5    <th>Quantity</th>
6    <th>Status</th>
7  </tr>
8  <tr>
9    <td>Adjustable Desk</td>
10    <td>$800</td>
11    <td>10</td>
12    <td>arrived</td>
13  </tr>
14  <tr>
15    <td>Leather iPhone wallet</td>
16    <td>$45</td>
17    <td>15</td>
18    <td>foo</td>
19  </tr>
20  <tr>
21    <td>27" Apple Thunderbolt displays</td>
22    <td>$1000</td>
23    <td>2</td>
24    <td>bar</td>
25  </tr>
26  <tr>
27    <td>Bose studio headphones</td>
28    <td>$60</td>
29    <td>4</td>
30    <td>delivered</td>
31  </tr>
32</table>

CSS

css
1table.table4col {
2  width: 98%;
3  margin: 1em 1%;
4  border-collapse: collapse;
5  border: none;
6}
7.table4col tr th {
8  font-family: 'Gotham Light', serif;
9  background-color: #27ae60;
10  color: #ffffff;
11  padding: 0.5em;
12}
13.table4col tr {
14  background-color: #ffffff;
15}
16.table4col tr:nth-child(odd) td {
17  background-color: #ebebeb;
18}
19.table4col td {
20  font-family: 'Gotham Book';
21  font-size: 0.75em;
22  padding: 0.5em;
23  width: 25%;
24}

Custom Table

HTML

html
1<table epub:type="table" id="table.1.4" class="table1mod">
2  <tr>
3    <th colspan="4">Shankle leberkas salami pork loin filet mignon.</th>
4  </tr>
5  <tr>
6    <td rowspan="2">Cupim shoulder short ribs, biltong beef ribs jerky picanha venison.</td>
7    <td>Brisket</td>
8    <td>Bacon</td>
9    <td>Pork</td>
10  </tr>
11  <tr>
12    <td>$45</td>
13    <td>15</td>
14    <td><span class="italic">foo</span></td>
15  </tr>
16  <tr>
17    <td>27" Apple Thunderbolt displays</td>
18    <td class="bad">$1000</td>
19    <td>2</td>
20    <td>bar</td>
21  </tr>
22  <tr>
23    <td><span class="small_cap">Bose studio headphones</span></td>
24    <td>$60</td>
25    <td>4</td>
26    <td class="good">delivered</td>
27  </tr>
28</table>

CSS

css
1table.table1mod {
2  width: 98%;
3  margin: 1em 1%;
4  border-collapse: collapse;
5  border: none;
6}
7.table1mod tr th {
8  font-family: 'Gotham Black';
9  background-color: #cfcfcf;
10  color: #ffffff;
11  padding: 0.5em;
12  letter-spacing: 0.05em;
13  text-shadow: #838383 1px 1px 1px;
14}
15.table1mod tr {
16  background-color: #ffffff;
17}
18.table1mod tr:nth-child(odd) td {
19  background-color: #ebebeb;
20}
21.table1mod td {
22  font-family: 'Gotham Book';
23  font-size: 0.75em;
24  padding: 0.5em;
25  width: 25%;
26}
27td.good {
28  color: #468847 !important;
29  background-color: #dff0d8 !important;
30  font-weight: bold;
31}
32td.bad {
33  color: #a94442 !important;
34  background-color: #f2dede !important;
35  font-weight: bold;
36}

If a table style is generic throughout the content then the width on the <td> can be removed and a generic name can be applied. If an table is heavily detailed and larger than 4 columns it can be included as an image but should be referenced in the lot and not the loi.

ON THIS PAGE