EverWeb Codebox

Columns

Column Layout

Attempting to layout columns using the tab key or multiple text boxes usually ends up in a disappointing mess!

An HTML table layout with the dividers removed is the way to go.

The table on this page is made with a 100% width so that the overall width can be adjusted easily by increasing/decreasing the width of the containing HTML Snippet.

The HTML and CSS are commented for easy customization.

<table class="ew-table" id="table-1" >

<!-- Row 1 -->

<tr>

     <td>Column 1</td>

     <td>Column 2</td>

     <td>Column 3</td>

</tr>

<!-- Row 2 -->

<tr>

     <td>Row 2</td>

       <td>Row 2</td>

     <td>Row 2</td>

</tr>

<!-- Row 3 -->

<tr>

     <td >Row 3</td>

       <td>Row 3</td>

       <td>Row 3</td>

</tr>

<!-- Row 4 -->

<tr>

      <td >Row 4</td>

      <td>Row 4</td>

      <td>Row 4</td>

</tr>

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

</table>

Column 1Column 2Column 3
Row 2Row 2Row 2
Row 3Row 3Row 3
Row 4Row 4Row 4

<style type="text/css">

.ew-table {

     width:100%;

     height: auto;

     margin:0;

     padding:0;

     background: transparent;

}

.ew-table td{

     vertical-align:middle;

     text-align:left;

     padding:5px 7px;

     font-size:15px;

     font-family:Verdana;

     font-weight:normal;

     color:#000;

}

.ew-table tr {

     margin: 0;

     padding: 0

}

</style>

HTML

CSS

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.

Column 1Column 2Column 3
Row 2Row 2Row 2
Row 3Row 3Row 3
Row 4Row 4Row 4

Wide Layout

Narrow Layout

Click the Easy button to see a widget for easily creating styled columns in EverWeb...

Easy