• Like
Upcoming SlideShare
Loading in...5
Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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;http://www.burgerking.com&quot; alt=&quot;Appetizers&quot; shape=&quot;rect&quot; coords=&quot;10,25,90,60&quot; />
    • < area href=&quot;http://www.legalseafood.com&quot; alt=&quot;Meals&quot; shape=&quot;poly&quot; coords=&quot;100,60,210,60,150,10&quot; />
    • < area href=&quot;http://www.pizzahut.com&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