Sometimes you just need to introduce data in charts on your web page. For the graphic part, you can simply export an image from an editing application and post it on your web page, but for the data you generally need a table to present it properly. To make a table on a web page, first you have to define its general properties, and then continue with its rows and cells.
Start by opening a <table></table> tag on your web page. Specify its properties next to this command, like this:
<table border="0" width="480" cellpadding="0" cellspacing="0">
</table>
With that you are telling the browser to render a table of 480 pixels of width, without borders and in which data is close to each other because you don't want space between cells (cellspacing) nor space between the border of the cell and the data (cellpadding). With these general specifications, now it is easy to complete the rest of the table.
Use <tr></tr> to start and close a new row. In it, use <td></td> to specify the beginning and end of each cell of the table.
<table border="0" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>column one</td><td>column two</td>
</tr>
<tr>
<td>row two</td><td>last cell</td>
</tr>
</table>
Easy, right?
In some occasions you need to merge either two rows or two columns to arrange your data in an appropriate way. If you need to do that, just use the colspan="" or rowspan="" properties to specify how many cells you need to merge, taking into account that colspan="" merges columns and that rowspan="" merges rows. Just use these properties in the cell you need to merge.
<table border="1" width="480" cellpadding="0" cellspacing="0">
<tr>
<td>column one</td><td>column two</td>
</tr>
<tr>
<td colspan="2">merged cells in a row</td>
</tr>
</table>
See it by yourself.
There are other occasions in which you need to specify whether the text in the cell should go in its top, in its middle or in its bottom; aligned to its left, to its right, centered or justified. Use the align="" and valign="" to specify that property. Use it in a cell to specify the properties of one cell, or in a row to specify the properties of the whole row.
These are the possible values:
align="" can include left, right, center or justify
valign="" can include top, middle or bottom.
<table border="0" width="480" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">column one</td><td>column two</td>
</tr>
<tr>
<td>row two</td><td>last cell</td>
</tr>
</table>
Easy and practical.
In the 1990s, web pages were designed in tables to ensure they will look alike in different web browsers. This is not considered appropriate or useful any more. As a matter of fact, when a web browser reads the code of a table it reads it twice: a first time to read the layout of the table and a second time to read its contents. This males your whole page open slower, and this is not a good idea.
To design sites, you currently use <div></div> boxes.
Heptagrama, the web summed up.
Some rights reserved.
Discover and learn + Computers and the Internet
