Scribd
Upload
141 views

Tables

The document provides information on how to create tables in HTML. It defines the basic table structure using <table>, <tr>, and <td> tags and demonstrates how to create a simple one-row table. It then shows how to add additional rows and columns. The document proceeds to demonstrate other table attributes and styles including adding headings, background colors, images, borders, widths, heights, alignments, cell spacing, and cell padding.

Uploaded by

api-321367518
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
141 views

Tables

The document provides information on how to create tables in HTML. It defines the basic table structure using <table>, <tr>, and <td> tags and demonstrates how to create a simple one-row table. It then shows how to add additional rows and columns. The document proceeds to demonstrate other table attributes and styles including adding headings, background colors, images, borders, widths, heights, alignments, cell spacing, and cell padding.

Uploaded by

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

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">

You might also like