User Tools

Site Tools


tables

Tables

The CE3 framework allows for “responsive tables”, the layout for which will change when viewed on small displays, making tables easier to read on devices such as iPhones. The formatting for tables is therefore very specific.

<table>

<thead>
<tr>
<th>Surname</th>
<th>Given Name</th>
<th>Gender</th>
<th>Year of Birth</th>
</tr>
</thead>

<tbody>

<tr>
<td>Finn</td>
<td>Liam</td>
<td>male</td>
<td>1984</td>
</tr>

<tr>
<td>Nicks</td>
<td>Stevie</td>
<td>female</td>
<td>1948</td>
</tr>

<tr>
<td>Shields</td>
<td>Kevin</td>
<td>male</td>
<td>1963</td>
</tr>

<tr>
<td>Simon</td>
<td>Émilie</td>
<td>female</td>
<td>1978</td>
</tr>

</tbody>

</table>

In the code above, note the use of <thead> and <th> tags to establish headings for the table cells.

Avoid using rowspan and colspan table attributes.

Your can prevent a table being responsive by applying the class “not-responsive” to your <table> element:

<table class="not-responsive">

You may freely use the rowspan and colspan attributes on tables which are not responsive, but these tables will not readjust on small devices.

On small displays, responsive tables will stack:

tables.txt · Last modified: 2013/02/01 08:10 by admin