Scribd
Upload
28 views

HTML How To Createtables

The document discusses HTML tables and their attributes. It covers how to insert, edit, and add headers to tables. It describes the main table elements (<TABLE>, <TR>, <TH>, <TD>, <CAPTION>) and explains how to use various table attributes to control styling, formatting, and layout. The document provides examples of basic table code to demonstrate incorporating these elements and attributes.

Uploaded by

bilisummaa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views

HTML How To Createtables

The document discusses HTML tables and their attributes. It covers how to insert, edit, and add headers to tables. It describes the main table elements (<TABLE>, <TR>, <TH>, <TD>, <CAPTION>) and explains how to use various table attributes to control styling, formatting, and layout. The document provides examples of basic table code to demonstrate incorporating these elements and attributes.

Uploaded by

bilisummaa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Tables

In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.

1
Tables
 The <TABLE></TABLE> element has four sub-
elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
 The table row elements usually contain table
header elements or table data elements.

2
Tables
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr>
</table>

3
Tables

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2

Row2, Col1 Row2, Col2

4
Tables Attributes
 BGColor: Some browsers support background colors
in a table.
 Width: you can specify the table width as an
absolute number of pixels or a percentage of the
document width. You can set the width for the table
cells as well.
 Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
 CellSpacing: Cell Spacing represents the space
between cells and is specified in pixels.
5
Table Attributes
 CellPadding: Cell Padding is the space
between the cell border and the cell contents
and is specified in pixels.
 Align: tables can have left, right, or center
alignment.
 Background: Background Image, will be titled
in IE3.0 and above.
 BorderColor, BorderColorDark.

6
Table Caption
 A table caption allows you to specify a line of text
that will appear centered above or bellow the table.
<TABLE BORDER=1 CELLPADDING=2>
<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

 The Caption element has one attribute ALIGN that


can be either TOP (Above the table) or BOTTOM
(below the table).

7
Table Header

 Table Data cells are represented by the TD


element. Cells can also be TH (Table Header)
elements which results in the contents of the
table header cells appearing centered and in
bold text.

8
Table Data and Table Header
Attributes
 Colspan: Specifies how many cell columns of the table this cell
should span.
 Rowspan: Specifies how many cell rows of the table this cell
should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
 Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.

9
Basic Table Code
<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD bgcolor=red>3476-AB</TD><TD>76mm
Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

10
Table Data and Table Header Attributes

<Table border=1 cellpadding =2>


<tr> <th> Column 1 Header</th> <th> Column 2
Header</th> </tr>
<tr> <td colspan=2> Row 1 Col 1</td> </tr>
<tr> <td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td> </tr>
<tr> <td> Row 3 Col2</td> </tr>
</table>

11
Table Data and Table Header Attributes

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 2
Row 2 Col 1
Row 3 Col 2

12
Special Things to Note
• TH, TD and TR should always have end tags.
Although the end tags are formally optional, many browsers will mess
up the formatting of the table if you omit the end tags. In particular,
you should always use end tags if you have a TABLE within a TABLE -- in
this situation, the table parser gets hopelessly confused if you don't
close your TH, TD and TR elements.
• A default TABLE has no borders
By default, tables are drawn without border lines. You need the
BORDER attribute to draw the lines.
• By default, a table is flush with the left margin
TABLEs are plopped over on the left margin. If you want centered
tables, You can either: place the table inside a DIV element with
attribute ALIGN="center".
Most current browsers also supports table alignment, using the ALIGN
attribute. Allowed values are "left", "right", or "center", for example:
<TABLE ALIGN="left">. The values "left" and "right" float the table to
the left or right of the page, with text flow allowed around the table.
This is entirely equivalent to IMG alignment

13
What will be the output?

<TABLE BORDER width=“750”>


<TR> <TD colspan=“4” align=“center”>Page
Banner</TD></TR>

<TR> <TD rowspan=“2” width=“25%”>Nav


Links</TD><TD colspan=“2”>Feature Article</TD> <TD
rowspan=“2” width=“25%”>Linked Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD> <TD


width=“25%”><News Column 2 </TD></TR>
</TABLE>

14
The Output

15

You might also like