Html web designing using tables

UNIT II…HTML WEB DESIGNING

Chapter 9: USING TABLES

WHY WE USE TABLES IN WEB PAGE?

• One of the most effective techniques to orgnizedata 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.

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>

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>

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>

SPANNING CELLS

• Some cells may span across several columns or rows. (in MS Excel it is merging cells)

Cell spansacross two rows

Cell spans across two columns

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>

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>

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>

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>

• 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.