CODING:

Day 12 Merging Cells

LETS TRY SOMETHING:

1. Open recipe.htm in your editor.
2. At the bottom of the body, just
before the </body> tag, write
the code to create the following
table (you can work with partners,
but EACH must type their own
code):
Row 1
Row
1
Row 1
3. cellspacing="0"
cellpadding="4"
Column 1
Column 2
Column 3
border="1"
Row 2
Row 2
Row 2
Column 1
Row 3
Column 1

Column 2
Row 3
Column 2

Column 3
Row 3
Column 3

CODE?

Row 1
Column 1

Row 1
Column 2

Row 1
Column 3

Row 2
Column 1

Row 2
Column 2

Row 2
Column 3

Row 3

Row 3

Row 3
Column 3

Column 1
Column 2
<table cellspacing="0" cellpadding="4"
border="1">
<tr>

<td>Row 1 Column 1</td><td>Row 1 Column 2</td><td>Row 1 Column

3</td>

</tr>
<tr>
<td>Row 2 Column 1</td><td>Row 2 Column 2</td><td>Row 3 Column
3</td>

</tr>
<tr>
<td>Row 3 Column 1</td><td>Row 3 Column 2</td><td>Row 3 Column
3</td>

</tr>
</table>

MERGING CELLS
Needs a COLSPAN ATTRIBUTE

SYNTAX: colspan=x
Replace x with number of
columns to span
Example below x=2

Heres how:
<tr>
<td colspan="2">Row 2 Column
1</td><td>Row 2 Column 2</td>

</tr>

TRY
IT!

What about THIS?

What COLSPAN ATTRIBUTE
would you use?

colspan=3
In ROW 2 and delete the
others
Dont forget an

align=center

tag!

CHECK YOUR CODE

MERGING CELLS
Needs a ROWSPAN ATTRIBUTE

SYNTAX: rowspan=x
Replace x with number of rows
w
o
to span
st R
1
n
i
!
Y
e
L
Example below x=3
d
o
ON
C

<table cellspacing="0" cellpadding="4"

border="1">
<tr>
<td>Row 1 Column 1</td >

<td rowspan="3">Row 1 Column

2</td><td>Row 1 Column 3</td>

</tr>
<tr>
<td>Row 2 Column 1</td><td>Row 2 Column
2</td>
</tr>
<tr>
<td>Row 3 Column 1</td><td>Row 3 Column
2</td>
</tr>
</table>

ACTIVITY
1. Open

practice.htm in your editor.

2. Add align=attribute coding to

the table on your website (left,
right, center).

3.MERGE at least one set of cells.

You may choose to ADD a TITLE
to your TABLE and use a
MERGED CELL there.
4. Save and view it.

ACTIVITY
1. Open

practice.htm in your editor.

2. Add align=attribute coding to

the table on your website (left,
right, center).

3.MERGE at least one set of cells.

You may choose to ADD a TITLE
to your TABLE and use a
MERGED CELL there.
4. Save and view it.