A Tutorial in HTML Tables

Tables are a structured way of arranging information on a web page or document. Simply put, each section of information is enclosed in a separate box to display information in an orderly and consistent manner on the page. Tables may be used to display data within the page, and may also be used to define the entire page. A traditional page arrangement with a header bar across the top, then a columnar page with the navigation links on the left, main content in the center, and a third column with some other content of interest on the right is usually the result of a combination of HTML table and CSS style.

The table command contains different design elements that can be used to control the spacing and style of the contents. Table attributes, like border and width, define the elements of table style. Once a basic style is set, other style attributes can be defined for a more interesting look. CSS styles can also be incorporated within the table element to offer more depth and interest to the table design.

Table divisions are arranged first in rows and then in cells within the row. Rows are horizontal, left to right, and the number of cells or its equivalent must be equal within the whole table. In other words, if row one has four cells, then rows two and three must also have four cells. However, using COLSPAN or ROWSPAN, cells can be expanded to cover more than one cell or row.

Within the table, specific cells can have separate design attributes. Sometimes it is necessary to define the alignment of a cell in relation to the cell next to it, for example, a picture may be aligned at the top of a cell, with related text in the next cell aligned at the bottom or in the middle.

The background of tables, rows, or cells can include an image, but there are some drawbacks to using images as backgrounds in certain browsers. The article Avoid Table Background Image Bugs explains the pitfalls and how to overcome them.

One of the strongest arguments for using CSS styles in addition to HTML attributes is dealing with empty cells. Unless empty cells are addressed, they will render in odd ways, destroying the symmetry of an otherwise well-defined table. CSS styling can fix this annoying little bug.

There are many free HTML table generators on the web, like the HTML Table Generator and the Auto Table Generator Form. This HTML Table Style Generator defines both table attributes and CSS style for a more flexible table design.

Finally, this list of Table Tutorials addresses some more advanced concepts, like rounding the corners of HTML tables for a less blocky look, and creating nested tables for a more complicated structure. While HTML is slowly being replaced by CSS, it is simpler and easier to understand and control for a beginner. With a little practice, it can still be a very useful tool.

Learning how to make a well-designed HTML table is just one component of web design. Attending a design school can help you learn many more aspects to web design.