Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply



Published on

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Images and Tables
  • 2. XHTML - Using Images
    • < img > tag has enough attributes to handle images on a web page
    • < img src=“boat.gif” alt=“Big Boat” border=“2” width=“30” height=“50” align=“bottom” hspace=“5” vspace=“5” usemap=“map1” />
  • 3. Using Images
    • Images can be used as hyperlinks
      • Replace the visible part of the tag by the image tag
    • Example-
    • <a href= www . neu . edu > <img src=“NUImage.jpg></a>
  • 4. Using Image Maps Restaurant Image Map Appetiser as rectangle Meals as triangle Pizza as circle
  • 5. Using Image Maps
    • The <area> tag is used to define one sub-image shape at a time (origin top left)
    • < img src=&quot;foodMenu.jpg&quot; usemap=&quot;#menuMap&quot; />
    • < map name=&quot;menuMap&quot;>
    • < area href=&quot;; alt=&quot;Appetizers&quot; shape=&quot;rect&quot; coords=&quot;10,25,90,60&quot; />
    • < area href=&quot;; alt=&quot;Meals&quot; shape=&quot;poly&quot; coords=&quot;100,60,210,60,150,10&quot; />
    • < area href=&quot;; alt=&quot;Pizza&quot; shape=&quot;circle&quot; coords=&quot;252,40,35&quot; />
    • </ map >
  • 6. Tables Structure & Variables
    • A table is defined as a region that has rows and columns of small rectangles (cells) that are arranged in a certain way that make up the table layout
    • XHTML provides many variables that allow web authors to control table layout
    • Table variables may be grouped into 2 categories:
      • Non-cell variables
      • Cell variables
  • 7. Non Cell Variables
    • Non-cell variables control the properties and structure of the table:
      • caption is the title of the table
      • summary provides a longer description
      • border is the table’s outside border
      • header is the first row of the table
      • width is total width of table
      • height is total height of table
  • 8. Non-Cell Variables Heading 1 Heading 2 Heading 3 Cell(1,1) Cell(1,2) Cell(1,3) Cell(2,1) Cell(2,2) Cell(2,3) Cell(3,1) Cell(3,2) Cell(3,3) Cell(4,1) Cell(4,2) Cell(4,3) Cell(5,3) Cell(5,2) Cell(7,1) Cell(7,2) Cell(7,3) Cell(6,3) Cell(6,2) Cell(6,1) Cell(5,1) Width Height Border Rows Columns
  • 9. Cell Variables
    • Cells are the basic units that make up the table
    • The horizontal and vertical lines that separate the cells are known as rulings/rules
    • Cell variables control the properties and structure of individual cells:
      • Row span
      • Column span
      • Padding
      • Spacing
      • Alignment
  • 10. Cell Variables
    • Cell spacing describes the amount of the horizontal and vertical spacing between cells
    • Specifying cell padding is equivalent to specifying top, bottom, left and right margins inside the cell
    • Cell content can be aligned within each cell
  • 11. Using Tables
    • There are 5 important tags:
      • <table> - Encloses all other table tags
        • Attributes: summary, width, height, border, align, rules, cell spacing and cell padding
      • <caption> - Assigns a title to the table
        • Attributes: align
      • <tr> - Creates a table row
        • Attributes: align
      • <th> - Creates a table header (row or column)
        • Attributes: abbr, headers, rowspan, colspan, nowrap, align
      • <td> - Creates table data (cells)
        • Attributes: abbr, headers, rowspan, colspan, nowrap, align, valign
  • 12. Using Tables <table border=2 summary=&quot;This is a Sample Table&quot; width=&quot;400&quot; height=&quot;200&quot;> <caption align=&quot;center&quot;>This is a Sample Table</caption> <tr align=&quot;center&quot;> <th>1st Heading goes here</th> <td bgcolor=&quot;yellow&quot;>Cell 1</td> <td>Cell 2</td> </tr> <tr align=&quot;center&quot;> <th>2nd Heading goes here</th> <td bgcolor=&quot;yellow&quot;>Cell 3</td> <td>Cell 4</td> </tr> <tr align=&quot;center&quot;> <th>3rd Heading goes here</th> <td bgcolor=&quot;yellow&quot;>Cell 5</td> <td>Cell 6</td> </tr> </table>
  • 13. Using Tables Cell 1 Cell 3 Cell 5 Cell 2 Cell 4 Cell 5 1 st heading goes here 2 nd heading goes here 3 rd heading goes here This is a Sample Table
  • 14. Nesting Tables
    • Table nesting is used to control formatting
    • Code is quite complex
    • A table is nested by having a table inside another table
    • Tables can be nested by using a <table> tag after <td>
    • Nesting tables may produce awkward results
      • Table cell sizes may vary greatly
      • Location of empty cells may not be acceptable to web authors
  • 15. Nested Tables
    • <table align=&quot;center&quot; border=&quot;4&quot; bgcolor=&quot;#FFFF00&quot;>
    • <tr>
    • <td>Cell 1</td>
    • <td>Nested Tables
    • <table align=&quot;center&quot;>
    • <tr>
    • <td>T21</td>
    • <td>T22</td> <td>T23</td>
    • </tr>
    • </table>
    • </td>
    • <td align=&quot;center&quot;>Cell 3</td>
    • <td valign=&quot;bottom&quot;>Cell 4</td>
    • </tr>
    • <tr>
    • <td>Cell 5</td>
    • <td>Cell 6</td>
    • <td>Cell 7</td>
    • <td>Cell 8</td>
    • </tr>
    • <tr>
    • <td>Cell 9</td>
    • <td>Cell 10</td>
    • <td>Cell 11</td>
    • <td>Cell 12</td>
    • </tr>
    • </table>
  • 16. WebPage Formatting via Tables
    • Formatting web pages using tables has the same idea as that of nesting tables
      • A web page layout is divided into regions
      • Then a table or a cell is substituted for each region
  • 17. WebPage Formatting via Tables
  • 18. Conclusion
    • Tables
      • Tables organize and structure web pages
      • There are table-level and cell-level variables
      • There are 5 important tags to use a table
        • table
        • caption
        • tr
        • th
        • td
      • Tables can be nested for better structure
      • Table are extensively used for formatting entire web pages
  • 19. Reference
    • Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference , Hungry Minds Inc,U.S.
    • Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS , New Riders.
    • Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript