EverWeb Codebox

Tables

Creating a Styled Table

Tables are useful for presenting data but can be kind of plain or sometimes downright ugly.

This table uses a basic HTML layout with some CSS to style the content.

The table width has been made 100% so that its width can be adjusted by increasing the snippet width and the height will adjust automatically as more rows are added.

<!-- start table -->

<table class="ew-table">

<!-- table headers -->

<tr>

<th>Info Header</th>

<th>Column [A] Header</th>

<th>Column [B] Header</th>

<!-- Add more headers as necessary -->

</tr>

<!-- Row 1 -->

<tr>

<td class="info">Info [1]</td>

<td>Info [1]

<br />Column [A] Content</td>

<td>Info [1]<br />Column [B] Content</td>

<!-- Add more columns (td) as necessary -->

</tr>

<!-- Row 2 -->

<tr>

<td class="info">Info [2]</td>

<td>Info [2]<br />Column [A] Content</td>

<td>Info [2]<br />Column [B] Content</td>

<!-- Add more columns (td) as necessary -->

</tr>

<!-- Row 3 -->

<tr>

<td class="info">Info [3]</td>

<td>Info [3]<br />Column [A] Content</td>

<td>Info [3]<br />Column [B] Content</td>

<!-- Add more columns (td) as necessary -->

</tr>

<!-- Add more rows as necessary -->

</table>

Info HeaderColumn [A] HeaderColumn [B] Header
Info [1]Info [1]
Column [A] Content
Info [1]
Column [B] Content
Info [2]Info [2]
Column [A] Content
Info [2]
Column [B] Content
Info [3]Info [3]
Column [A] Content
Info [3]
Column [B] Content

HTML

CSS

<style type="text/css">          

.ew-table {         /* table overall border styles*/

     border: solid 1px #000;

     border-collapse: collapse;

     width: 100%;

     height: auto;}

.ew-table  th {      /* table header styles */

     align: center;

     font: normal 16px "TrebuchetMS", Helvetica, sans-serif;

     color:#CCCCCC;

     padding: 10px;

     border: 1px solid #000;

     background-color: #444;}

.ew-table tr {           /* row border styles */

     border: solid #000 2px;}

.ew-table td {           /* column styles */

     padding: 5px 30px;

     width: auto;     

     font: normal 15px "Verdana", Helvetica, sans-serif;

     border: 1px solid #000;

     background-color: #FEFEFE;}

.ew-table td.info {           /* first column styles */

     padding:  5px 30px 0 20px;     

     font: normal 15px "Verdana", Helvetica, sans-serif;

     color: #EEEEEE;

     font-style: italic;

     border: 1px solid #000;

     background-color: #666;}

</style>


The HTML and CSS are commented for easy customization.

Paste the HTML into a Snippet and the CSS into the page Head Code box.

Drag the snippet out horizontally to increase the overall table width.

Adjust the snippet height to fit the number of rows.