Creating Tables
- How to use HTML source code to create a table on your web page.
- How to set the background and border color of your table.
- How to define which border lines to draw around and inside your table.
- How to set the width of your table and how to align it on your web page.
- How to align cell content and configure blank space around it.
- How to make table cells span multiple rows and columns.
Using Tables as Tables
Next to the hyperlink, one of the most widely used HTML elements is the
table element. Take a peek at the source code of any big corporate website and you are bound to see a plethora of tables, table rows and table data cells, and then nested inside many of the cells you will find even more tables with their respective rows and cells. Effectively then, one would imagine to find most of these web pages stuffed from margin to margin with tabular data but such is not the case, or rather, to the untrained eye, the use of tables is not readily apparent. This is because tables are used on web pages primarily for layout and design as opposed to being used for their original purpose, i.e. presenting a collection of related data in neatly organized rows and columns...
Background and Border Color
You are not obliged to settle for the default color used by web browsers to draw the borders of your HTML tables. Using various attributes in the
<table> tag, you can specify your table's border color and even create a simple 3D effect. You can also define your table's background color... Table Frames and Rules
You don't have to define all four sides of your table's border (also known as the 'frame') nor are you obliged to define all the lines that separate rows and columns (known as 'rules') inside your table. In conjunction with
border, you can use other attributes to specify exactly how to display the frame and the rules... Table Width and Alignment
By default, web browsers will define the width of a table as the minimum width required to hold the table's contents. You can, however, apply the
width attribute to the table element to explicitly set the width of your table. Also, providing the table does not fill or exceed the width of the available space (e.g. your web page), you can use the align attribute to set its alignment...Cells 1 -Space and Alignment
A fine degree of control over the display of tables can be attained by applying certain attributes which not only affect the table as a whole but specifically affect the table cells, either collectively or individually. These attributes define how cells are arranged with respect to one another, the amount of blank space that wraps around cell content and the alignment of cell content...
The
cellspacing and cellpadding attributes are used in the <table> tag and apply to all cells in the respective table. The align and valign attributes are used in individual <td> tags and apply respectively to that particular table data cell.Cells 2 -Row and Column Span
When constructing an HTML table, the number of rows are established by the number of
<tr>...</tr> tag pairs while the number of columns are established by the number of <td>...</td> tag pairs in each row. Typically, the table will be layed out like a grid with each cell's width equal to the width of one column and each cell's height equal to the height of one row. You may, however, have any cell spread over or 'span' the width of multiple rows or columns using special attributes in the <td> tag...| HOME | TOP | NEXT ~> |
