TABLES
Contents
• THE TABLE TAG
• ATTRIBUTES OF <TABLE> TAG
• CELLSPACING
• SPANNING ROWS AND COLUMNS
Tables allow information to be in rows and columns.
They are used as a way of presenting data in a highly
controlled tabulated form giving greater control over
positioning of elements.
Apart for allowing text to be arranged in columns tables can
be used:
1. To divide the page into various sections
2. To create menus
3. To add interactive form fields
4. To create fast loading headers of page
5. For easy alignment of images
<TABLE> tag
• The <TABLE>…. </TABLE> tag is used to signify the start of a
table definition.
• The element has four sub-elements; Table Row <TR> .. </TR>,
Table Header <TH> .. </TH>, Table Data <TD> .. </TD> and
Caption <CAPTION> .. </CAPTION>
• By default, table headings are bold and centered.
REGISTRATION NO. NAME GENDER
J31/001/2018 JOAN FEMALE
J31/002/2018 JOHN MALE
example
<HTML> <HEAD>
<TITLE>Welcome to my TABLE page </TITLE> </HEAD>
<BODY>
<TABLE BORDER="1"> <CAPTION>REGISTRATION TABLE<CAPTION>
<TR>
<TH>REGISTRATION NO </TH>
<TH>NAME </TH>
<TH>GENDER </TH>
</TR>
<TR>
<TD> J31/001/2018</TD>
<TH>JOAN </TH>
<TH>FEMAL </TH>
</TR>
<TR>
<TD>ROW 2 COL 1 </TD>
<TH>ROW 2 COL 2 </TH>
</TR>
<TABLE>
CAPTION tag
• This gives the caption for the title of the table. The
default position of the title is centered at the top of the
table.
• It is only permitted after the TABLE tag.
• Caption tag has the following align attribute values:
ALIGN=BOTTOM, TOP, LEFT, RIGHT
ATTRIBUTES OF <TABLE> TAG
• WIDTH
• Allows designers to set the width of the table using two methods,
either as an explicit value or a percentage value. Using the first
method it is possible to create a table to exact horizontal dimensions.
• e.g.
• <TABLE WIDTH=500> gives the table which is fixed to 500 pixels.
• The second method, whilst not as exact, uses a percentage of the
available space which allows the table to expand or contract along
with the browser if it is resized at any point.
• e.g.
• <TABLE WIDTH="90%"> forces the table to take 90% of the
available horizontal space.
• HEIGHT
• It is declared just like the width attribute, however, not all browsers
accept this attribute.
BORDER
• This attribute sets the thickness of the borders surrounding the table.
• e.g. <TABLE BORDER =2>
• If no border is desired a value of 0 BORDER=0 is given.
• Every table is a collection of rows and cells. Each row contains a number of
cells, each of which contains the table information.
• Rows must be set up before cells can be added in. In order, to create a table
row the <TR> and </TR> container is used. Each row can contain a number
of cells.
• The color of the border can be set by declaring:
• <TABLE BORDERCOLOR = red>
• A border can also be set using the CSS border property:
• Example
• table, th, td {
border: 1px solid black;
}
TABLE ROWS
• The <TR> tag has the following attributes:
• ALIGN
• Specifies the horizontal alignment of cell data for a row. ALIGN can
be either LEFT, RIGHT, or CENTER.
• VALIGN
• Specifies the vertical alignment of cell data for a row. It takes one of
the values TOP, MIDDLE, or BOTTOM.
• BGCOLOR
• A recent addition to the table attributes, BGCOLOR takes the same
values as the BGCOLOR attribute of the BODY tag.
• NB/ This tag is not supported by all browsers.
TABLE CELLS
• For every ROW in a table there must be a number of cells which
contain the data to be displayed.
• There are two elements for table cells ie <TH> and <TD>
• <TD> tag that defines a table data cell. By default the text in this cell
is aligned left and centered vertically. It specifies the start and end tag
of a cell which may hold data.
• <TH> tag that defines a table header cell. By default the text in this
cell is bold and centered.
• <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
.
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• Write an HTML code that would display the following table on a browser
NAME COMPANY CONTACT
John Ali Kenya power Kenya
Paul Kelly IBM South A frica
CELLSPACING
• Distance between cells
• This attribute sets the size of the "invisible" margin between
individual cells in a table as well as the size of the gap between the
cells and the border of the table overall.
• e.g.
<TABLE BORDER = 1 BORDERCOLOR=#ff0000 CELLSPACING=20>
<TR><TD>Data1<TD>Data2<TD>Data 3
<TR><TD>Data 4<TD>Data 5<TD>Data 6
</TABLE>
CELLPADDING
• Allows the setting of the gap between the left hand edge of table cells
and the start of the cell contents.
• Cellpadding can be used to create areas of space within cells so that
the cell contents don't appear to be pushed up close to the edge of that
cell.
e.g.
<TABLE CELLPADDING = 25 >
<TR><TD>D1<TD>D2<TD>D3
</TR><TD>D4<TD>D5<TD>D6
</Table>
• To set the padding, use the CSS padding property: Example
th, td {
padding: 15px;
}
SPANNING ROWS AND
COLUMNS
• Using COLSPAN and ROWSPAN attributes it is possible to expand cells.
• - The values of COLSPAN and ROWSPAN can be anything from 2 to the
maximum number of cells in the width and height.
• - Values greater than the total number of cells have no effect though care
should be taken as this may cause problems later on when the table is
extended.
• - Spanned cells always extend to the right of their own position (in the case
of row span) and into the space below their own position (if it’s a colspan) It
is not possible to tell a cell to span into space above or to the left of its own
position.
COLSPAN = number
• This is an attribute that specifies the number of columns spanned by the
current cell. The value 0 means that cells span all columns from the current
column to the last column of the column group. Cells may span several
columns. e.g
<TABLE BORDER =1>
<TR>
<TD>ADM NO </TD>
<TD Colspan="2">NAME</TD>
ADM NO NAME
</TR>
J31/001/2018 JOHN KARANJA
<TR>
<TD>J31/001/2018 </TD> J31/002/2018 ROSE MUTHEE
<TD>JOHN</TD>
<TD>KARANJA</TD>
</TR>
</TABLE>
ROWSPAN = number
• This attribute specifies the number of rows spanned by the current cell
including the current row. e.g.
<TABLE BORDER =1>
<TR>
<TD rowspan = 3>NAME SURNAME
<TD >SURNAME
<TD>MWANIKI FIRST NAME
NAME
</TR><TR>
<TD>FIRSTNAME
OTHERS
<TD>JAMES
</TR><TR>
<TD>OTHERS
<TD>DANIEL
</TR>
</TABLE>
e.g
<TABLE>
<CAPTION ALIGN =Bottom> Table Head Summary </CAPTION>
<TR>
<TD ROWSPAN=2>Row 1 Col 1</TD>
<TD COLSPAN=2>Row 1 Col 2</TD>
</TR>
<TR>
<TD> Row 2 Col 1 </TD>
<TD> Row 2 Col 2 </TD>
</TR>
</TABLE>
e.g.
<TABLE BORDER=1>
<TR><TD>Row 1 Cell 1</TD><TD>Row1 Cell 2</TD>
<TD>Row 1 Cell 3</TD>
</TR>
<TR><TD ROWSPAN = 2>Row 2 Cell 1</TD>
<TD COLSPAN =2>Row 2 Cell 2</TD>
</TR>
<TR><TD>Row 3 Cell 2</TD><TD>Row 3 Cell 3</TD>
</TR>
</TABLE>
A Special Style for One Table
• To define a special style for a special table, add an id attribute to the
table:
• <table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• Now you can define a special style for
this table:
• table#t01 {
width: 100%;
background-color: #f1f1c1;
}
QUESTIONS
COMMENTS
