Scribd
Upload
9 views13 pages

Merging Cells Lesson 1

This document discusses how to merge cells, nest tables, and add invisible borders and images to tables. It provides details on the attributes for table data cells like colspan and rowspan for merging cells horizontally and vertically. It also explains how to nest tables and set invisible borders.

Uploaded by

barrocaleanne18
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views13 pages

Merging Cells Lesson 1

This document discusses how to merge cells, nest tables, and add invisible borders and images to tables. It provides details on the attributes for table data cells like colspan and rowspan for merging cells horizontally and vertically. It also explains how to nest tables and set invisible borders.

Uploaded by

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

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!

You might also like