UNIT II…HTML WEB DESIGNINGChapter 9: USING TABLES
WHY WE USE TABLES IN WEB PAGE?• One of the most effective techniques to orgnize  data is to place it in a table.• Tables a...
PUTTING A CAPTION• A caption tells your reader what your table  contains. To indicate caption, you must make  sure that th...
USING THE ALIGN ATTRIBUTE TOCAPTION.• To put the caption at the bottom of the table, you  add BOTTOM to the align attribut...
DEFINING THE STRUCTURE OF A TABLE•   DEFINING ROWS-.•   <TABLE>•   <TR>This is a table row</TR>•   <TR>This is another tab...
SPANNING CELLS• Some cells may span across several columns or  rows. (in MS Excel it is merging cells) Cell               ...
SPANNING CELLS ACROSS SEVERAL ROWS • <TD ROWSPAN= no. of rows to span>- used to   define number of rows will span. Use thi...
SPANNING CELLS ACROSS SEVERAL COLUMNS • <TD COLSPAN= no. of column to span>- used   to define number of column will span. ...
MODIFYING THE STRUCTURE OF A TABLE• ENHANCING BORDERS and ADJUSTING CELL  SPACING.• <Table Border= 4>• <tr>• <td> This cel...
CHANGING CONTENT ALIGNMENT•   <Table border>•   <tr align= right>•   <td> the content here is right-aligned</td>•   </tr>•...
•   ADJUSTING SPACE AROUND CONTENT.•   <Table border cellpadding= 4>•   <tr>•   <td> The cells padded with 8 pixels around...
Html web designing using tables
Html web designing using tables
Html web designing using tables
Html web designing using tables
Html web designing using tables
Upcoming SlideShare
Loading in …5
×

Html web designing using tables

705 views

Published on

For BBEMNHS students reference.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
705
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html web designing using tables

  1. 1. UNIT II…HTML WEB DESIGNINGChapter 9: USING TABLES
  2. 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.
  3. 3. 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>
  4. 4. USING THE ALIGN ATTRIBUTE TOCAPTION.• 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>
  5. 5. 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>
  6. 6. 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
  7. 7. 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>
  8. 8. 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>
  9. 9. 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>
  10. 10. 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>
  11. 11. • 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.

×