HTML

LESSON 101

HTML TABLES
Tables

are defined with the

<table> tag.
<table border=1> </table>
Rows (with the <tr> tag)
<tr> </tr>
Table data (with the <td> tag).
<td>

</td>

How will you make a simple ta

ble
<table border=1>
<tr>
<td> Row 1a </td>
</tr>
</table>

How will you make a simple ta

ble
<table border=1>
<tr>
<td> Row 1a </td>
<td> Row 1b </td>
</tr>
</table>

How will you make a simple ta

ble
<table border=1>
<tr>
<td> Row 1a </td>
<td> Row 1b </td>
</tr>
<tr>
<td> Row 2a </td>
<td> Row 2b </td>
</tr>
</table>

<table border=1>
<tr>
<td> Row 1a </td>
<td> Row 1b </td>
</tr>
<tr>
<td> Row 2a </td>
<td> Row 2b </td>
</tr>
</table>
<br>
<table border=1>
<tr>
<td> Row 1a </td>
<td> Row 1b </td>
</tr>
</table>

<th> Heading </th>

<table border=1>
<tr>
<th> Month </th>
<th> Savings </th>
</tr>
<tr>
<td> July </td>
<td> 50 Baht </td>
</tr>
</table>

<th> Vertical Heading </th>

<table border=1>
<tr>
<th> First Name </th>
<td> Bill Gates </td>
</tr>
<tr>
<th> Telephone Number
</th>
<td> 55577854 </td>
</tr>
</table>

<th> Vertical Heading </th>

<table border=1>
<tr>
<th> First Name </th>
<td> Bill Gates </td>
</tr>
<tr>
<th> Telephone Number
</th>
<td> 55577854 </td>
</tr>
</table>

Bgcolor = modify color

<table border=1>
<tr bgcolor=pink>
<th > First Name </th>
<td> Bill Gates </td>
</tr>
<tr bgcolor=cyan>
<th> Telephone Number
</th>
<td> 55577854 </td>
</tr>
</table>

Add a hyperlink to td
<table border=1>
<tr bgcolor=cyan>
<th> Website</th>
<td>
<a href=https://www.facebook.com/>
Facebook
</a>
</td>
</tr>
</table>

Add image background to td

Change font color

<table border=1 background=pink.gif>

<tr>
<th> Website</th>
<a href=https://www.facebook.com/>
Facebook
</a>
</tr>
</table>

Add image background to td

Change font color

<table border=1>
<tr>
<th> Website</th>
<td background=pink.gif>
<a
href=https://www.facebook.com/>
Facebook
</a></td>
</tr>

Change height and width

<table height=50 width=400 border=1

>
<tr>
<th align=center > Website</th>
<td align=center> Facebook </td>
</tr>
</table>

Change data alignment

<table height=50 width=400 border=1
>
<tr>
<th > Website</th>
<td> Facebook </td>
</tr>
</table>

Cell spacing
<table cellspacing=10 height=50
width=400 border=1 >
<tr>
<th align=center > Website</th>
<td align=center> Facebook </td>
</tr>
</table>

Cell Padding

<table cellspacing=10 cellpadding=50

height=50 width=400 border=1 >
<tr>
<th align=center > Website</th>
<td align=center> Facebook </td>
</tr>
</table>

Basic Tables
CELLSPACINGcontrols the
space between table cells. Alt
hough there is no official defa
ult, browsers usually use a de
fault of 2.
<table cellspacing=5">
CELLPADDINGsets the amount
of space between the content
s of the cell and the cell wall.
The default is 1.
<table cellpadding="10">

 Border

Table Attributes

- applies a border to each cell.

<table border="1">
Bgcolor- specifies the background color of the table.
<table bgcolor=blue">
Background- specifies the image background.
<table background=image.jpg">
Width- attribute specifies the width of a table.

<table width=400">

Height-

attribute specifies the height of a table.

<table height=600">
Align- attribute specifies the alignment of a table.
<table align="left|right|center">