Scribd
Upload
6 views22 pages

Chapter 5 Tables PR

The document provides an overview of HTML tables, detailing the <TABLE> tag and its attributes, including cell spacing, spanning rows and columns, and how to format tables. It explains the use of sub-elements like <TR>, <TH>, and <TD> for structuring data, as well as attributes for styling and alignment. Additionally, it includes examples of table creation and customization using CSS.

Uploaded by

mc.mashmello
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views22 pages

Chapter 5 Tables PR

The document provides an overview of HTML tables, detailing the <TABLE> tag and its attributes, including cell spacing, spanning rows and columns, and how to format tables. It explains the use of sub-elements like <TR>, <TH>, and <TD> for structuring data, as well as attributes for styling and alignment. Additionally, it includes examples of table creation and customization using CSS.

Uploaded by

mc.mashmello
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like