Introduction to HTML tables

You are viewing the article: Introduction to HTML tables at

Tables are HTML structures that allow better control over the positioning of elements on your web pages. As an introduction. This column explains how to set the layout, cell dimensions, spacing, color, and alignment of your tables. In next month’s column, we’ll examine increasingly advanced techniques and the importance of tables in the layout of your entire website.

Table commands and structure

In FIGURE 1, I aligned the code in a specific way. While not essential, such spacing is extremely beneficial when troubleshooting your spreadsheets, as it helps you ensure commands opened and closed correctly. (Note: This code will be inserted into the BODY of your webpage.)

The first required tag is and the last is . I gave the table a border property of one so you can see an outline of the rows and cells. You can see that The command (TR = ‘Table Row’) represents the start of a new row (across the page). All table tags are coupled, so rows must be terminated with when completed. within a row, then creates columns (goes down the page – TD = ‘Table Data’ or ‘Table Down’). These must always be contained in an open work. The intersection of the row and column creates cells that contain your data.

Consider this with reference to Fig. 1 draws a box in the browser’s memory. For each row () The browser inserts a horizontal line, and each in this row creates a corresponding number of columns that contain data. Hence, since we can count three coupled tags, this table must have three rows. Each of these rows has three cells because they each contain three coupled cells keywords.

table dimensions

Without a definition, cells automatically wrap to accommodate their contents, and tables automatically wrap to fit the cells. You can set the dimensions of both tables and individual cells using the width and height properties. For example:

Or to set the dimensions of a specific cell:

cell spacing and cell filling

By adding the cellspacing property to the TABLE command, you can specify the spacing between the table border and the cells. In contrast, the cellpadding property inserts spaces inside the cell, ie between the contained object and the cell border. If not specified, a default value of two pixels is automatically implemented. Consequently, to have no space at all, you need to include these properties like this:

cell contents here

Figure 2 illustrates the difference between cell spacing and cell fill.

background color and background

By including bgcolor and/or background properties in your TABLE command and/or your

-Tags let you brighten things up. If you set the color of a specific cell, it will appear above the table color. The following example would create a blue table with an orange cell:


If I gave the spreadsheet a background graphic, the color of the cells (if specified) would overlay the encoded image.

Note: Be careful when using these properties in conjunction with cellspacing. Netscape does not color the spaced area while Internet Explorer does.

Align and validate

The align property refers to the horizontal position of an element. The most common values ​​are left, right or center (note the spelling). Valign refers to vertical alignment, associated values ​​are top, bottom, and middle. If not specified, objects automatically inherit the property of align=”left” and valign=”center”.

By using these properties in your TABLE command, you can specify the position of the entire table on the web page. When used within TD, the location of data is specified in individual cells.

The following example would place the table at the top center of the page:

This example would force the cell contents to the lower right corner of the cell:

See more new articles in category: GUIDES
Leave a comment
cell contents here