Merging Cells

Prepared by: Jayrallyn M. Mayordomo

Colegio de San Jose, Jaro Iloilo City Inc.
 learn merging cells, nesting
tables, and invisible boarder

identify the attributes for table data

Objectives:

create a table with invisible

boarder and adding an images
Topics:
Attributes for table data <td></td>
Merging Cells Horizontally
Merging Cells Vertically
Merging Cells Horizontally and Vertically
Nesting Tables
A Table with Invisible Border
Adding an Image to a Table
 Attributes for <td></td>
Attribute name Definition
align Indicates the horizontal alignment of the contents of the cell.
<td align = “center”></td>
valign Indicates the vertical alignment of the contents of the cell.
<td valign = “bottom”></td>
background Indicates the background image of the cell.
<td background=“redFlower.jpg”></td>
bgcolor Indicates the background color of the row.
<td bgcolor=“blue”></td>
height Indicates the height of the cell in pixels.
<td height=“200”></td>
width Indicates the width of the table in pixels or percent of the width
of the table
<td width=“300”> </td>
 Attributes for <td></td>

Attribute name Definition

nowrap Inhibit word wrapping in the cell
<td nowrap></td>
colspan Merges multiple cell
<td colspan=“2”></td>
rowspan Merges multiple rows
<td rowspan=“2”></td>
 Merging Cells Horizontally – cells in the same row can be merged
using the colspan attribute of <td></td>and <th></th>

Merge
Cells

Merge
Cells
 Merging Cells Vertically – cells in the adjacent row can be merged
using the rowspan attribute of <td></td>and <th></th>

Merge
Cells

Merge
Cells
 Merging Cells Horizontally and Vertically – cells on the same row and
adjacent rows can be combine by the use of rowspan and colspan
attributes

Merged
columns and
rows

Merged
columns and
rows
 Nesting Tables – web developers use this technique to
enhance layout and structure

Outer table
border

Links

Inner table
 Nesting Tables – web developers use this technique to
enhance layout and structure

Outer table
border

Inner table
 Invisible border – set the table into “0”

Outer table
border

Inner table
 Adding an Image to a Table – you can add image to a cell by using the
tag pair <td><img scr=“.jpg”>

Add picture

Picture added
to a cell
Thank you!