Scribd
Upload
10 views3 pages

Tables

The document provides a detailed overview of HTML tables, including their structure, elements, and attributes. It explains how to define tables, rows, header cells, and data cells, as well as attributes like ALIGN, VALIGN, COLSPAN, and ROWSPAN. Additionally, it includes an example of a table with a caption and various attributes for formatting.

Uploaded by

otieno.18742
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
10 views3 pages

Tables

The document provides a detailed overview of HTML tables, including their structure, elements, and attributes. It explains how to define tables, rows, header cells, and data cells, as well as attributes like ALIGN, VALIGN, COLSPAN, and ROWSPAN. Additionally, it includes an example of a table with a caption and various attributes for formatting.

Uploaded by

otieno.18742
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/ 3

TABLES

The table is divided into three main parts, a header, a body and a footer. There is also an optional
caption that can be added to the table.
Table is divided into rows each having a number of columns. As with most word processing systems
it is possible to give groups of columns special features and to merge two or more columns together
or two or more rows together.

Element Description:--

<TABLE> ... </TABLE>

defines a table in HTML. If the BORDER attribute is present, your browser displays the table with
a border.
<CAPTION> ... </CAPTION>

defines the caption for the title of the table. The default position of the title is centered at the top of
the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
<TR> ... </TR> specifies a table row within a table. You may define default attributes for the
entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM).
See Table Attributes at the end of this table for more information.

<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and centered.
Table header cells may contain other attributes to determine the characteristics of the cell and/or its
contents. See Table Attributes at the end of this table for more information.

<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left and centered
vertically. Table data cells may contain other attributes to determine the characteristics of the cell
and/or its contents

Borders These are the lines that surround the table and each cell.

CELLSPACING. The CELLSPACING attribute tells the browser how much space to include
between the walls of the table and between individual cells. (Value is a number in pixels.)

CELLPADDING. The CELLPADDING attribute tells the browser how much space to give data
elements away from the walls of the cell. (Value is a number in pixels

Attribute Description :--

ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.


VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of rowa cell spans.
ROWSPAN=n The number (n) of rcolumn a cell spans
The general format of a table looks like this:--

<TABLE>
<!-- start of table definition -->

<CAPTION> caption contents </CAPTION>


<!-- caption definition -->

<TR>
<!-- start of header row definition -->
<TH> first header cell contents </TH>
<TH> last header cell contents </TH>
</TR>
<!-- end of header row definition -->

<TR>
<!-- start of first row definition -->
<TD> first row, first cell contents </TD>
<TD> first row, last cell contents </TD>
</TR>
<!-- end of first row definition -->

<TR>
<!-- start of last row definition -->
<TD> last row, first cell contents </TD>
<TD> last row, last cell contents </TD>
</TR>
<!-- end of last row definition -->

</TABLE>
<!-- end of table definition -->

EXAMPLE OF TABLE
<html><head><title> my food</title></head><body>

<TABLE>

<CAPTION>My favorite foods</CAPTION>

<table width="40%" height="30%" cell padding="5" border="0" align="center">

<TR><TH>Soup</TH><TD>Chicken Noodle</TD> </tr>

<TR><TH>Salad</TH><TD>Tossed Green</TD> </tr>

</TABLE></body></html>

Other attributes
 ALIGN. The ALIGN attribute is used to determine where the chart will appear relative to the
browser window. Valid values are ALIGN=LEFT and ALIGN=RIGHT. As an added bonus,
text will wrap around the table (if it's narrow enough) when the ALIGN=LEFT or
ALIGN=RIGHT attributes are used.
 WIDTH. The WIDTH attribute sets the relative or absolute width of your table in the
browser window. Values can be either percentages, as in WIDTH="50%", or absolute values.
With absolute values, you must also include a suffix that defines the units used, as in px for
pixels or in for inches (e.g., WIDTH="3.5in"). Absolute values for table widths are
discouraged, though.
 COLS. The COLS attribute specifies the number of columns in your table, allowing the
browser to draw the table as it downloads.
 BORDER. The BORDER attribute defines the width of the border surrounding the table.
Default value is 1 (pixel).
 CELLSPACING. The CELLSPACING attribute tells the browser how much space to
include between the walls of the table and between individual cells. (Value is a number in
pixels.)
 CELLPADDING. The CELLPADDING attribute tells the browser how much space to give
data elements away from the walls of the cell. (Value is a number in pixels.)

You might also like