UNIT-2

HTML Tables

The most versatile formatting tool available to webmasters, use html tables to position your text and
images

A table is made with the following tags

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<th></th> Sets off the table header (a normal cell with bold, centered text)

Table’s Attributes

<table border=#> Sets width of border around table cells

<table cellspacing=#> Sets amount of space between table cells

<table cellpadding=#> Sets amount of space between a cell's border and its contents

<table width=# or %> Sets width of table - in pixels or as a percentage of document width

<tr align=?> or <td align=?> Sets alignment for cell(s) (left, center, or right)

<tr valign=?> or <td valign=?> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan=#> Sets number of columns a cell should span

<td rowspan=#> Sets number of rows a cell should span (default=1)

Make your first table

copy and paste this code to your notepad and make your own table

<TABLE border=1>
<TR>
<TD>
my first table
</TD>

1
Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:

Heading Another Heading

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Table borders

An introduction to html table borders

you may make noticed the border=1 attribute in the table tag, this was put in so that users can see the
table on a white background
my first table
lets just fiddle about with the border attribute to see what it does
<TABLE border=0>
my first table

it is also possible to control the color of the border

<TABLE border=10 bordercolor=#0099FF>
my first
table

2
if we want it to appear 3D then we could include the bordercolorlight and bordercolordark attribute
<TABLE border=10 bordercolorlight=#0099FF bordercolordark=#0000FF>
my first
table

html table size

The size of a table

height and width attributes can be added to the <TABLE> tag as well as the <TD> tag
<TABLE width=300 height=100>

my first table

colspan
on the previous page we made this html table
my first table
my first table

lets add another cell to the bottom row

the code above gives us this
my first
table
my first table my first table

now we have a problem, a 'ghost cell'

we can deal with the ghost cell using the colspan attribute
<TABLE border=20>
my first table
lets add colspan=2 to the table definition in the top row
i.e <TD colspan=2>

the code above gives us this

my first table
my first table my first table

in the table below the second row has four cells, so colspan is set to 4 in the table definition in
the first row
<TD colspan=4>

3
Thank you for trying deskUNPDF. This free trial is limited to one page
conversions for the purpose of evaluating deskUNPDF’s capabilities.

If you wish to obtain unrestricted functionality in deskUNPDF, please visit

www.docudesk.com to purchase or learn more about our PDF software solutions.