Html web designing using tables
-
Upload
bong-francisco-jr -
Category
Technology
-
view
515 -
download
1
description
Transcript of 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.