Alignment And Cell Padding - How Web Pages Work | HowStuffWorks

By default, all cell contents within a table (with the exception of table headings) align vertically centered and left justified. To make the contents of a cell align a different way, apply the following tags within the <td>, <th> or <tr> tags:

For horizontal alignment, values can be left, right, or center:

Advertisement

Example: <tr align="center">

For vertical alignment, values can be top, bottom, or middle:

Example: <td valign="top">

You can also arrange the alignment of your entire table, to decide where it appears on the page. By inserting the tags <align="right"> or <align="left"> within the initial "table" tag, text will wrap around your table wherever it is located. Or, if you would like your table to stand alone without any wrap around text, use "division alignment" tags before and after your entire table.

Cell Spanning

"Spanning" occurs when one cell spans two or more other cells in the table.

For column spanning, the tag <colspan=value> is placed within the <td> tag where it applies. Here is a code example:

<table border=1> <tr><td colspan=2>This cell spans over two columns </td> <td>This cell spans over one column </td> </tr> <tr align="center"> <td>A </td> <td>B </td> <td>C </td> </tr> </table>

For row spanning, the tag <rowspan=value> is placed within the <td> tag where it applies. For example:

<table border=1> <tr><td rowspan=2>This cell spans over two rows </td> <td>A</td><td>B</td></tr><tr><td>C</td><td>D</td> </tr> </table>

You can also apply many of the attributes we learned in the last chapter within your table, such as font size, type and color, inserting an image, making a list and adding a link. Just add the appropriate tag to the particular cell you would like to format, right after that cell's tag.

Experiment and practice with the variety of tools and tags you learned in this article. The creative possibilities are endless when it comes to using tables on a Web page. Stack images and borderless colored boxes to create seamless designs, or nest borderless tables within borderless tables, some with color, some without, to create eye-catching layouts. Web page design limits expand with a little imagination, creativity and the use of tables.

Resources

• The HowStuffWorks Big List of HTML Tags - A printable, one-page reference guide that contains all of the common HTML tags on one easy sheet

Read More