Login    New User    Forgot Password    Help      

Adding a Border,Title And Headings


Adding a border, title, and headings

In addition to the basic table tags, several options are available for adding additional elements to your table. For example, if you add a border, title, and column headings to the table in the previous section, the table would then resemble the following:


Column A Column B
Data 1 Data 2
Data 3 Data 4
Data 5 Data 6

The following codes generated the border, TABLE TITLE, and Column A and Column B headings for this table:

    <TABLE  BORDER="5">
          <TH COLSPAN="2">
    Column A</TH>
    Column B</TH>

Note:  If you wish to view the codes that generated the Data 1 through Data 6 cells, refer to the previous section. 

Notice that the beginning table tag, <TABLE>, now includes the border tag, BORDER="5", which places a border around the table and frames each cell. The number that you ascribe to the border tag, BORDER=n, sets the width of the table border. Depending on how you design your table, you can then determine the border size that best suits your table and the overall design of your web page.

To add a title to your table, you would place the title and the attributes of that title between the row commands, <TR> and </TR>. The heading codes, <TH> and </TH>, define a heading cell and, by default, these codes center the heading and set it in bold type.  However, if you want the title to span across the columns below it, you need to include the COLSPAN=n code. Since this table has two columns, the COLSPAN="2" code was necessary. To add emphasis to the header, you can use the header commands to make the text larger. In this table, notice that the <H3> and </H3>commands made the title larger. Finally, the <BR> tag created a space above the title.

The individual column headings are also described by the heading codes, <TH> and </TH>. Since these codes, by default, center the heading and set it in bold type, no additional commands or attributes were included in the heading commands.