Tables to hold your data

In HTML, tables offer a great way to structure data sets and information that needs to sit within a columns/rows matrix. In a time not to long ago, tables in HTML were found to be an accepted way to create layouts for content. The problem was that the extra table markup was conflicting with the structural markup and generally made a mess of things. Furthermore, there were workarounds necessary to hold the layout together. Eventually, Cascading Style Sheets (CSS) came into the picture and took the place of tables as a layout option. I tell this story so you know this, TABLES ARE NOT TO BE USED TO LAYOUT A WEB PAGE! Use tables to hold sets of data because it does it well!

Tables are generated by creating rows of table data. Let us take a look at a table below. (TR = Table Row, TD = Table Data)

Rendered

Widget Price Quantity
Thingy $5 20
McBob $3 23

Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
	<tr><!--Row 1 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>	
	<tr><!--Row 2 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>	
	<tr><!--Row 3 -->
		<td>Widget</td>
		<td>Price</td>
		<td>Quantity</td>
	</tr>
</table>

Leave a Reply