For BBEMNHS students reference.

1. UNIT II…HTML WEB DESIGNING
Chapter 9: USING TABLES

2. WHY WE USE TABLES IN WEB PAGE?
• One of the most effective techniques to orgnize
data is to place it in a table.
• Tables allow you to neatly present content in
specific columns and rows (or lines).
• Tables on Web pages can have text, numbers or
even images.
• Using tables you can lay-out your page to make
look like a newspaper, product catalog, or an
electronic brochure.

8. PUTTING A CAPTION
• A caption tells your reader what your table
contains. To indicate caption, you must make
sure that the <CAPTION></CAPTION> tag pair
is inside the <TABLE></TABLE> tag pair.
Caption by default are placed at the top of the
table, unless you define the alignment.
• <TABLE>
• <TD></TD>
• </TR>
• <CAPTION></CAPTION>

9. USING THE ALIGN ATTRIBUTE TO
CAPTION.
• To put the caption at the bottom of the table, you
add BOTTOM to the align attribute.
• <TABLE BORDER>
• <CAPTION ALIGN= BOTTOM ></CAPTION>
• <TR>
• <TD></TD>
• <TD></TD>
• </TR>
• </TABLE>

10. DEFINING THE STRUCTURE OF A TABLE
• DEFINING ROWS-.
• <TABLE>
• <TR>This is a table row</TR>
• <TR>This is another table row</TR>
• DEFINING THE CELLS
• <TABLE>
• <TH>This is a table header</TH>
• <TH>This is another table header</TH>
• <TABLE>
• <TD>This is a table data</TD>
• <TD>This another table data</TD>

11. SPANNING CELLS
• Some cells may span across several columns or
rows. (in MS Excel it is merging cells)
Cell Cell spans across
spans two columns
across
two
rows

12. SPANNING CELLS ACROSS SEVERAL ROWS
• <TD ROWSPAN= no. of rows to span>- used to
define number of rows will span. Use this
attribute inside the <TD> tag.
• <TABLE BORDER>
• <TR>
• <TD ROWSPAN= 3>A cell spanning three rows.
</TD>
• <TR></TABLE>

13. SPANNING CELLS ACROSS SEVERAL COLUMNS
• <TD COLSPAN= no. of column to span>- used
to define number of column will span. Use this
attribute inside the <TD> tag.
• <TABLE BORDER>
• <TR>
• <TD COLSPAN= 3>A cell spanning three
columns. </TD>
• <TR></TABLE>

14. MODIFYING THE STRUCTURE OF A TABLE
• ENHANCING BORDERS and ADJUSTING CELL
SPACING.
• <Table Border= 4>
• <tr>
• <td> This cell uses border number 4</td>
• </tr></table>
• <Table Border Cellspacing= 8>
• <tr>
• <td>This cell uses 8 pixels of space.</td>
• </tr></table>

15. CHANGING CONTENT ALIGNMENT
• <Table border>
• <tr align= right>
• <td> the content here is right-aligned</td>
• </tr>
• <tr align= left>
• <td> the content here is left-aligned</td>
• </tr>
• <tr align= center>
• <td> the content here is centered</td>
• </tr></table>

16. • ADJUSTING SPACE AROUND CONTENT.
• <Table border cellpadding= 4>
• <tr>
• <td> The cells padded with 8 pixels around
them> </td></tr></table>
• ADDING IMAGE
• <Table border>
• <tr>
• <td><img src= “dog.jpg”></td>
• </tr></table>
• Note: Images should be save in the folder of your web
documents. Not all images is recognizable by some web
browser.