Tables

644 views

Published on

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

  • Be the first to like this

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

No notes for slide

Tables

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

×