The rowspan and colspan Attributes

- To merge or join cells, use the rowspan and colspan attributes. The difference between these
is that, with the rowspan attribute, you can specify how many rows cell extends to, while the
colspan specifies how many columns a cell takes up.
What if you want to add another set of data and use a new classification? In this case, the
colspan attribute can be used to separate fiction books from nonfiction ones. It is best to
draft your table on a sheet of paper first and plan the exact numbers of rows and/or columns
a single cell is going to take up. This way, you can easily organize your table rows and all the
data that belong to them.
Empty Cells in a Table
Borders around empty cells in a table will not be visible. To make the borders visible, just add a non-
breaking space ( ) to this empty cells.

The Width Attribute

This attribute sets the table width. Its values may be in pixels or percentages. Specifying the width in
pixels fixes the size of the table. Specifying the widths in percentages allows the final table width to
depend on the size of the browser window.
Note: if you do not include this attribute, the table will only be as wide as necessary to display the
content.

The Cellpadding and Cellspacing Attributes

These attributes have similar names and are thus potentially confusing. The cellpadding attribute
increases the amount of space between the cell border and the contents in a cell; in other words, this
attribute makes cells bigger. The cellpadding value is expressed in pixels. The cellspacing attribute, on the
other hand, creates more space between the individual table cells. The value of this attribute is also
expressed in pixels.
CONNECT: The nowrap attribute is used to make sure that the content in any cell will be displayed on one
line. The same attribute is acceptable for the table heading <th> tag, too. Example: <td nowrap>

EXERCISES
Match Column A with Column B. Write ONLY the letter of the correct answer on the blank space
provided.
Column A Column B
__________ 1. style=” ” a. creates a table
__________ 2. <style></style> b. add a cell into a table
__________ 3. <table></table> c. extends the cell to a specified number of rows
__________ 4. <tr></tr> d. table attribute that ensures the text inside a
cell is displayed in one line
__________ 5. <td></td> e. extend the cell to a specified number of
columns
__________ 6. nowrap f. syntax for internal style
__________ 7. colspan g. increases the amount of space between the
cell border and the content
__________ 8. rowspan h. adds a row into a table
__________ 9. cellpadding i. increases the amount of space between cells
__________ 10. cellspacing j. syntax for in-line style