Home / Internet / Html Tables Tutorial

Html Tables Tutorial

With the introduction of hypertext markup language came the new possibility of organizing data into coherent structures. One of these structures common in day-to-day Internet use is the table. This very dynamic organizational tool manifests itself in a variety of imaginative ways, including layouts, input forms, and of course the traditional table. The latter is the focus of this article – designing effective tables in html.

Section 1.0 – What is a Table?

A table, simply put, is a collection of “cells” – basic units of information – that are sorted according to their location, given in row, column coordinates. Tables are encountered everywhere – examples include tables of contents, spreadsheet programs, laboratory data collection, databases, invoices and bank statements. The significance of the organization of a table is completely left to the designer. In any case, a table header describes the significance of the following data, while portions of a table that are not headers are most likely the data itself.

Section 2.0 – Example Table

By far, the most effective way to demonstrate tables in hypertext markup language is through a simple example. Copy the following into a text file, save it as “example1.html”, and open it in a web browser:

Table Example

Example Table:

Column 1 Column 2
4 6
2 9
14 17
12 9
3 3
12 1
4 7


tag specifies the beginning of a table row. Inside of the


tags are placed. Each

tag specifies a cell of the table in that row. The

tags are displayed in the order they appear. All of the table-specific tags are specified inside of a



The table is certainly a powerful organizational tool. This useful method for data abstraction has limitless uses online, and is fairly straightforward to implement. A solid grasp of table fundamentals will ensure success in website development and design.

About User Lin