Html web designing using tables

Html web designing using tables

• 1.
  UNIT II…HTML WEBDESIGNING Chapter 9: USING TABLES
• 2.
  WHY WE USETABLES 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 ALIGNATTRIBUTE 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 STRUCTUREOF 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 • Somecells 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 ACROSSSEVERAL 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 ACROSSSEVERAL 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 STRUCTUREOF 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.