1 / 82

Creating Tables using HTML

Week 6. Creating Tables using HTML. Creating Tables using HTML. <html> <head> <title>Creating Tables</title> </head> <body> <table border=“10” bgcolor=“red”> <tr colspan=“2”> <td>&nbsp></td></tr> </body> </html>. text, images, links,

jstthomas
Télécharger la présentation

Creating Tables using HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Week 6 Creating Tables using HTML

  2. Creating Tables using HTML <html> <head> <title>Creating Tables</title> </head> <body> <table border=“10” bgcolor=“red”> <tr colspan=“2”> <td>&nbsp></td></tr> </body> </html>

  3. text, images, links, forms, form fields, other tables, etc. Creating Tables using HTML An HTML table allows you to arrange data into rows & columns of cells.

  4. A B C D E F G H I J K L M N O P Q R S T U V W X

  5. A B C D E F G H I J K L M N O P Q R S T U V W X

  6. A A&B C D E F G H I J K L M N O P Q R S T U V W X

  7. A A,B,G,H, M,N,S,T C D E F G H I J K L M N O P Q R S T U V W X

  8. A A,B,G,H, M,N,S,T C D E F G H I J K L M N O P P & Q R S T U V W X

  9. A A,B,G,H, M,N,S,T C D E F G H I J K L M N O P P & Q R S T U V W X

  10. A,B,G,H, M,N,S,T C D E F I J K L O P & Q R U V W X

  11. Structure of an HTML Table

  12. Columns

  13. Rows

  14. Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells Cells

  15. Border

  16. Caption

  17. Table header

  18. Control width of each column

  19. Control Height of each Row

  20. Border

  21. Border

  22. Border

  23. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Border

  24. Column span A A&B C D E F G H I J K L M N O P Q R S T U V W X

  25. Column span A A&B C D E F G H I J K L M N O P Q R S T Column span

  26. Row span A B C D E F G H I K L M N O Q R S T U W X

  27. Row span A B C D E F G H I K L M N O Q S T U W X Row span

  28. Row and Column span A B C C D E F G I H I M N O Q L S T U V W X

  29. Pop Quiz ------- How many Columns? How many Rows? A B C D E F G H I J R L M K N O P P Q

  30. Answer = 6 Columns A B C D E F G H I J R L M K N O P P Q

  31. Answer = 4 Rows A B C D E F G H I J R L M K N O P P Q

  32. Answer = 6 Columns and 4 Rows A B C D E F G H I J R L M K N O P P Q

  33. Pop Quiz # 2 How many Columns? How many Rows? A B C D E G H I J R M K N O P P Q S

  34. Answer: Columns = 6 Rows = 5 Pop Quiz # 2 How many Columns? How many Rows? A B C D E G H I J R M K N O P P Q S

  35. Table 1 Table 2

  36. Table 1 Table 2 Table 3

  37. Table 1 Table 2 Table #2 is inside Table#1

  38. Show me how !!

  39. Table Tags Opening Tag Closing Tag Tag to create the Table: Tag to create Caption: Optional Tag to create each Row: Tag to create Header Row: Optional Tag to create each Cell:

  40. Table Tags Opening Tag Closing Tag Tag to create the Table: Required In EVERY Table Tag to create Caption: Tag to create each Row: Tag to create Header Row: Tag to create each Cell:

  41. Table Tags Opening Tag Closing Tag Tag to create the Table: <TABLE> </TABLE> Tag to create Caption: <CAPTION> </CAPTION> Tag to create each Row: <TR> </TR> <TH> </TH> Tag to create Header Row: Tag to create each Cell: <TD> </TD>

  42. Table Tags Opening Tag Closing Tag Tag to create the Table: <TABLE> </TABLE> Tag to create Caption: <CAPTION> </CAPTION> Tag to create each Row: <TR> </TR> Nested <TH> </TH> Tag to create Header Row: Tag to create each Cell: <TD> </TD>

  43. X O X O X X O O X <html> <head> <title>table one</title> </head> <body> </body> </html>

  44. X O X O X X O O X <table> </table>

  45. X O X O X X O O X <table> <tr> </tr> </table>

  46. X O X O X X O O X <table> <tr> </tr> <tr> </tr> </table>

  47. X O X O X X O O X <table> <tr> </tr> <tr> </tr> <tr> </tr> </table>

  48. X O X O X X O O X <table> <tr> <td> </td> </tr> </table>

  49. X O X O X X O O X <table> <tr> <td>X </td> </tr> </table>

  50. X O X O X X O O X <table> <tr> <td>X </td> </tr> </table>

More Related