HTML Basics Studies & Important description Part VII

HTML BASICS STUDIES FOR STUDENTS

HTML Basics Description

1.   Tables

In HTML tables are used for creating charts and tables, but are no longer recommended for controlling page layout.  Traditionally, a table with two columns (which need not have the same width) is one way to create the familiar side-bar with links to other parts of a web site.  Today, using CSS is the preferred way to achieve this result.

Position on the page/page layout may be controlled with CSS.  This is discussed in the CSS notes.  Controlling position with CSS works better for pages which may be ‘read’ in many formats (e.g. on hand-held devices), but has the disadvantage that an external style-sheet is not always downloaded from a web page (i.e. the layout is not saved).  It is the preferred method for laying out pages.

<table>    </table>                 The Table Tag

Every table begins and ends with these tags.

A table has rows (which run left to right) and columns (which go up and down, just as on a building).

A table is described by reading across the first row, then reading across the next row, etc.

All rows of a table are of the same width.

<tr>      </tr>               The Table Row Tag

<tr> marks the beginning of a row's description.

            <table>

                        <tr>

                                    NiPS Institute

            </tr>

                        <tr>

                                   NiPS Institute

            </tr>

                        <tr>

                                   NiPS Institute

            </tr>

</table>

Notice that I have indented the table rows.  Table descriptions can get complex (you can even put a table inside another table!) and it is a good idea to do this!

<th>    </th>               The Table Header Tag

<td>    </td>               The Table Data Item Tag

Each entry in a table is either a header (which is in bold) or a data item. The beginning and end of each entry is surrounded by these tags.

Beginning with HTML5, all attributes of tables (border, cellspacing, cellpadding, and width. etc.), table rows and table cells must be set through CSS.

You may specify width in <table> or in each column.

            For the whole table (specified in the table tag):

<table style=” width:70%”>……</table>        The table takes us 70% of the page.

            <table style=”width:200”>……..</table>        The table is 200 pixels wide.

            For a table column (specified in a table cell):

                        <th style=”width:20%”>…</th>   This column is 20% of the width of the table.

                                                                        You may do this for some or all columns (once for

                                                                        each column, typically in the  first row)

                        <th style=”width:50”>…..</th>            The column is 50 pixels wide.

You may specify alignment within each cell or row.

            <th style=”text- align:left”>  </th>A th or td or tr may be aligned left or right or center.

<td style=”vertical-align:top”> </td>   A th or td or tr may be vertically aligned
                                                                      top, middle, bottom.

Or you may specify that all the cell elements be aligned a certain way by putting the table inside div tags:

            <div style=”text-align:center”>

                        <table>

                                    :

                                    :

                        </table>

            </div>

You may align a table for purposes of wrapping text.

           <table style=”text-align:left”>…</table>         Puts the table on the left side of the page, and
                                                                                    the text to the right.

                                                                                   The only choices are left and right.

You may put a caption on the top or bottom (default) of a table:

           <table>

           <caption style=”text-align: top”>Data for Our Fascinating Study</caption>

                       <tr>

                                   :

                                   :

                       </tr>

           </table>

See the various tables pages for examples, and examples of coloring both all the background and

individual cells. 

           <table style=”background-color=”red”>……..</table>          
                                                                                 An entire table with a red background

           <td style=”background-color:blue”>          </td>         A blue cell

           <table style=”border:5;border-color=”green”>……..</table>   For St. Patrick’s Day.

To create space around your cell contents:

           <table style=”cellpadding:5”>             Cellpadding is the space between the edge of the cell                                                                    and its contents.

           <table style=”cellspacing:5”>              Cellspacing is the space between cells.      

          

Sometimes you want a cell to stretch across several columns (e.g. for a heading) or down several rows.

            <tr style=”text-align:center”>

                        <th>This is the first column.</th>

                       

                        <th colspan=”3”>This occupies the next 3 columns.<th>

                       

                        <th>This is the last column</th>

           

            </tr>

If you are doing something complex, it is a good idea to make a simple sketch of it before you start coding.  That way when you have a column or row span you will remember which cells have already been taken described.  See tables11c.html

Remember:   If you have an empty cell and you want it to be colored, put a <br /> in it.