HTML tables allow web designers to organize and arrange data in a tabular format using rows and cells. Tables are defined using <table>, <tr>, and <td> tags. <table> tags define the start and end of the table. <tr> tags define table rows within which <td> tags define individual table cells. Additional tags like <th>, <caption>, and attributes like border, cellpadding, cellspacing provide styling and information.

1. H T M L
T AB L E S
E X P L A I NE D
Author: M.Rehan

2. What is a TABLE?
• The HTML table allows web designers to
arrange & organize data -- text, images,
hyperlinks, forms, form fields, other tables, etc.
• Tables are made up of rows and columns.
--Rows are horizontally arranged cells
--Columns are vertically arranged cells
1 ROW
1 COLUMN
Author: M.Rehan

3. TABLE: Components
• Basic HTML table tags:
o <table></table> required
oDefines the beginning and end of the table
o <tr></tr> required
oTable Row - Defines the beginning and end of a
horizontal row.
o <td></td> required
oTable Cell - Defines an individual cell. Cells are always
placed inside a row. “td” stands for table data.
Code
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
1 2
3 4
Browser View
Author: M.Rehan

4. TABLE: Components Cont.
• Additional HTML table tags:
o <th></th> optional
o Defines a table header row. Used instead of “td.”
o Text is bold & centered within the cell
o <caption></caption> optional
o Sets a caption for the table. Goes after the table tag but
not inside “tr” or “td.” There should be only one caption
per table. Appears centered above the table.
Code
<table>
<caption>My Schedule</caption>
<tr><th>Period</th><th>Class</th></tr>
<tr><td>1st</td><td>PE</td></tr>
<tr><td>2nd</td><td>Math</td></tr>
</table>
Period Class
1st PE
2nd Math
Browser View
My Schedule
Author: M.Rehan

5. TABLE: Tag attributes
• Attributes that can be added to table tags:
o Table Border optional
o Table border attribute dictates border thickness
o Example: <table border=“1”>
o 0 = no border & larger numbers = thicker borders
o No border defined = no border viewable
o bordercolor can be added to change the color of the
table border. Border must be >0 to see the color
o Example: <table border=“1” bordercolor=“red”>
o Table Width & Height optional
o Width & Height can be defined in the open table tag
o Example: <table width=“100” height=“100”>
o The height attribute is widely supported, but isn't actually
part of the official HTML standard. It may not always work
as you expect.
o If no size values are specified, the browser will decide on
an appropriate size. Results will vary between browsers.
Author: M.Rehan

6. TABLE: Tag attributes cont.
• Additional attributes that can be added to table tags:
o Cell Padding optional
o Defines the space inside each cell, i.e. the space
between the edges of the cell and the
content within it.
o Example: <table border=“1”
cellpadding=“10” bordercolor=“red”>
o Cell Spacing optional
o Defines the space between cells. If a border is used, the
spacing will widen the border.
o Example:
<table border=“1” cellspacing=“10”
bordercolor=“green”>
o These attributes apply to the entire table - you can't specify
spacing or padding for individual cells.
Author: M.Rehan

7. TABLE: Tag attributes cont.
• Attributes that can be added to th, tr, & td tags:
o Alignment optional
o Alignment can be added to the table, tr, th, & td tag.
o If applied to the table tag, the entire table will align.
o If applied to the tr tag, the entire row will align.
o If applied to the th or td tag, just the cell will align.
o Alignment options: left, center, & right
o Contents will left align by default
Code
<table border=“1”><tr align=“right”>
<td>Test1</td><td>Test2</td></tr><tr>
<td>Test3</td><td>Test4</td></tr></table>
o Column & Row span optional
o Column span (colspan) is added to a th or td tag
o Row span (rowspan) can added to the tr tag
Code
<table><tr><td colspan=2>Heading</td></tr>
<tr><td>Entry1</td><td>Entry2</td></tr></table>
Browser View
Test1 Test2
Test3 Test4
Browser View
Heading
Entry1 Entry2

8. REVIEW: HTML tables
Code
<table border=“10” bordercolor=“orange” cellspacing=“2” cellpadding=“3”
width=“500”> <caption>My Schedule</caption>
<tr><th>Period</th><th>Class</th></tr>
<tr><td align=“center”>1st</td> <td>Web Design</td></tr>
<tr><td align=“center”>2nd</td><td>Social Studies</td></tr>
<tr><td colspan=“2”>Lunch</td></tr>
<tr><td align=“center”>3rd</td><td>English</td></tr>
</table>
table
border
align
center
cell padding
cell
spacing
table
header
column
span
Browser View