Web topic 12 tables in html


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

No notes for slide

Web topic 12 tables in html

  1. 1. Web Authoring Topic 12 – Tables in HTML
  2. 2. ObjectivesStudents should able to:1. Use Web Authoring tool to createtable using the following HTML tags: • table structure, rows and columns; • table cell merge; • cell margins;
  3. 3. Why use Table?To arrange and group data and imageorderly.To arrange screen space.
  4. 4. <table> tag<TABLE> </TABLE> tag pair contains allother elements that specify caption, rows,content and formatting.Common elements that go with table are<caption>, <tr>, <td>, <th>
  5. 5. <caption> tagA description for the table. Its optional.It is only allowed immediately after the<table> tag.<TABLE> <CAPTION >Employee Data</CAPTION> <TR>……</TR></TABLE>
  6. 6. <tr> tagDefines a row on a HTML table.A <tr> element contains one or more <td>or <th> elements.
  7. 7. <th> and <td> tagThe <th> tag defines a header cell in anHTML table.The <td> tag defines a standard data cell. The text in a <th> element is bold and centered.The text in a <td> element is regular andleft-aligned.
  8. 8. Rowspan attributeNo. of rows spanned by the current cell. 2<TABLE BORDER=“1”> 1 3 <TR> <TD rowspan=“2” > 1 </TD> <TD> 2 </TD> </TR> <TR><TD> 3 </TD></TR></TABLE>
  9. 9. Colspan attributeNo. of columns spanned by the currentcell <TABLE BORDER=“1”> 1 <TR> <TD colspan=“2” > 1 </TD> 2 3 </TR> <TR> <TD> 2 </TD> <TD> 3 </TD></TR> </TABLE>
  10. 10. Table Row GroupTable rows can be grouped into a tablehead, table foot, and one/more table bodysections using THEAD, TFOOT & TBODYEach THEAD, TFOOT & TBODY containsa row group. Each row group mustcontain at least one row, defined by theTR tag.
  11. 11. Table Row GroupTFOOT must appear before TBODY within the TABLE.
  12. 12. Table Column GroupColumn groups allow authors to createstructural divisions within a table.Column groups are created byCOLGROUP tag.
  13. 13. Table Column GroupThe COL tag allows authors to shareattributes among several columns withoutany structural grouping.COL tags serve only as a support forattributes. They may appear inside/outsidean explicit column group defined usingCOLGROUP tag.
  14. 14. Table Formatting - FrameA table’s external frame (border) can becontrolled by the FRAME attribute of theTABLE tag.FRAME determines which sides of theframe surrounding a table will be visible.
  15. 15. Table Formatting - FrameFRAME can take the following values: void: No sides. This is the default value. above: The top side only. below: The bottom side only. hsides: The top and bottom sides only. vsides: The right and left sides only. lhs: The left-hand side only. rhs: The right-hand side only. box: All four sides. border: All four sides.
  16. 16. Table Formatting - RuleRules are the internal dividing linesbetween table cells.RULES can take the following values: none: No rules. This is the default value. rows: Rules will appear between rows only. cols: Rules will appear between columns only. all: Rules will appear between all rows and columns. groups: Rules will appear between row groups and column groups only.
  17. 17. AlignmentALIGN and VALIGN attributes can beused for different table tags.ALIGN specifies the horizontal alignmentof data and the justification of text in acell.VALIGN specifies the vertical alignment ofdata and text in a cell.
  18. 18. Cell Margin
  19. 19. Cell Margin Example<TABLE border=“2” cellspacing=“20”cellpadding=“20”> <TR> <TD>Data1</TD> <TD>Data2</TD> <TD>Data3</TD> </TR></TABLE>
  20. 20. Review Questions1. List the common elements that comes with the table tag. Common elements that go with table are <caption>, <tr>, <td>, <th>2. What is the tag that defines a data cell? The <td> tag defines a standard data cell.