Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2016-07-09 16:18:41

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,795
Website

Table Markup

Basic markup for a table looks like this:

<table>

	<thead>
		<tr>
			<td>Column 01</td>
			<td>Column 02</td>
			<td>Column 03</td>
		</tr>		
	</thead>

	<tbody>

		<tr>
			<td>Col 01, Row 01</td>
			<td>Col 02, Row 01</td>
			<td>Col 03, Row 01</td>
		</tr>		

		<tr>
			<td>Col 01, Row 02</td>
			<td>Col 02, Row 02</td>
			<td>Col 03, Row 02</td>
		</tr>		

	</tbody>

</table>

If you'd then like to start specifying widths of things, you can do so like this:

<table style="max-width: 640px;">

	<thead>
		<tr>
			<td style="width: 50%;">Column 01</td>
			<td style="width: 25%;">Column 02</td>
			<td style="width: 25%;">Column 03</td>
		</tr>		
	</thead>

	<tbody>

		<tr>
			<td>Col 01, Row 01</td>
			<td>Col 02, Row 01</td>
			<td>Col 03, Row 01</td>
		</tr>		

		<tr>
			<td>Col 01, Row 02</td>
			<td>Col 02, Row 02</td>
			<td>Col 03, Row 02</td>
		</tr>		

	</tbody>

</table>

It is sufficient to set the width for columns only for the top-most cells, as the rest of the column with follow suit.

To use different colors for even and odd rows, apply the "table-striped" class to the table, and set your colors in the Typography section of Pangolin's page template designer, e.g.:

<table class="table-striped">

Matt

The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB