Creating a Simple Table

JavaScript Editor

Best javascript editor debugger Ajax website
↑

Main Page

Creating a Simple Table

Tables are made up of rows of cells. The number of cells in each row determines the table's shape.

Figure 16.3. This very simple table has two rows, each of which has only one cell.

Figure 16.4. The style sheet contains only pure text formatting; nothing that would affect the table per se.

To create a simple table:

1.	Type `<table>`.
2.	If desired, press Return and Tab to visually distinguish the row elements. These won't affect display in the browser.
3.	Type `<tr>` to define the beginning of the first row.
4.	Type `<td>` to define the beginning of the cell.
5.	Type the contents of the cell.
6.	Type `</td>` to complete the cell.
7.	Repeat steps 46 for each cell in the row.
8.	Type `</tr>` to complete the row.
9.	Repeat steps 27 for each row.
10.	To finish the table, type `</table>`. Figure 16.5. By default, the table extends almost as far as the edge of the browser window. Figure 16.6. Here's the exact same table in a narrower browser window. The table simply contracts to fit better in the window.

Tips

The </table> tag is not optional. Some browsers won't display tables without it.
There is also a th tag for creating header cells. Its default formatting is generally centered and boldface, but you can easily apply CSS to it to create special header styles. In addition, if you're organizing tabular data, header cells can help describe your table and make it more accessible.
You can create a title for the table with the caption element. Use align="direction", where direction is top, bottom, left, or right to align the caption. It's ugly and not well supported.

JavaScript Editor

Best javascript editor debugger Ajax website
→