1. HTML Tables
The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into rows and columns of cells.
Each table may have an associated caption that provides a short description of the table's purpose.
Table rows may be grouped into a head, foot, and body sections, (via the thead, tfoot and tbody elements, respectively).
When long tables are printed, the head and foot information may be repeated on each page that contains table data.
HTML Tables
tMyn

2. You need to know about four basic table tags, as described:
Table cells may either contain "header" information (see the th element) or "data" (see the td element). Cells may span multiple rows and columns.
You need to know about four basic table tags, as described:
HTML Tables
tMyn

3. Elementary tags for building a HTML Table:
The table tag is a container for every other tag used to create a table in HTML. The opening and closing table tags should be placed at the beginning and the end of your table.
<tr>
</tr>
The tr tag stands for table row. The opening and closing tr tags surround the cells for that row.
<th>
</th>
The th tag stands for table header. An optional tag used instead of the td tag, this tag defines a cell containing header information. By default, the content in header cells is bolded and centered.
<td>
</td>
The td tag stands for table data and holds the actual content for the cell. There is an opening and closing td tag for each cell in each row.
HTML Tables
tMyn

4. First table example employs some elementary tags:
HTML Tables
tMyn

5. HTML Tables
tMyn

6. Tables, by nature of their design, have internal and external borders.
By default, most browsers set the border to zero, making them invisible (see the previous example).
To make the border visible, use border attribute:
<table border=“3”>
The larger the number you specify, the thicker the borders become.
Another useful table attribute might be frame attribute.
HTML Tables
tMyn

7. Two attributes can be added to the table tag:
When the borders are visible for a table, it’s easier to see how much space is around the content and in between the cells.
Two attributes can be added to the table tag:
cellbadding: space between the content within the cell and the edges of that cell.
cellspacing: space in between each of the individual cells.
Increasing the cell padding can give extra buffer space around the text, so it doesn’t run into the borders.
Increasing cell spacing allows for a gutter between multiple cells.
HTML Tables
tMyn

8. The caption tag enables you to specify captions for your tables.
This tag is a stand-alone element used after the table tag (see the next example) but before the first table row.
At times, you might have content in a cell that needs to be kept on a single line. In cases lake this, you can add the nowrap attribute to your td or th tag, which tells the browser to try and keep all the content in that cell on a single line if at all possible.
HTML Tables
tMyn

9. Three tags in particular are used to group rows within tables:
thead: table header
tfoot: table footer
tbody: table body
Using these tags the browser is able to differentiate between the header and footer information, and the main content of the page.
The header information is repeated at the top of each page or screen view of the table, even if the table is printed.
HTML Tables
tMyn

10. HTML Tables
tMyn

11. HTML Tables
tMyn

12. HTML Tables
tMyn

13. We can add the colspan attribute to a td or th tag to merge cells across two or more columns:
HTML Tables
tMyn

14. HTML Tables
tMyn

15. HTML Tables
tMyn

16. Likewise we can add the rowspan attribute to a td or th tag to merge cells across two or more rows:
HTML Tables
tMyn

17. HTML Tables
tMyn

18. HTML Tables
tMyn

19. HTML Tables
tMyn

20. Next example modifies the Nordic countries table by implementing external style sheet:
HTML Tables
tMyn

21. HTML Tables
tMyn

22. HTML Tables
tMyn

23. HTML Tables
tMyn

24. HTML Tables
tMyn

25. Some explanations to the previous example:
white-space: nowrap; This value collapses whitespace as for 'normal', but suppresses line breaks within text.
em: the font-size of the relevant font
ex: the ’x-height’ of the relevant font
px: pixels, relative to the viewing device
HTML Tables
tMyn

26. td {padding: 0.25em 0.25em 0.25em 0.25em};
The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. In that case the order is padding-top, padding-right, padding-bottom and padding-left,so for example
td {padding: 0.25em 0.25em 0.25em 0.25em};
HTML Tables
tMyn

27. First example divides text into two columns:
Now let us talk about using tables to lay out an entire page, regardless of whether it looks like it would fit into a grid or a table structure.
First example divides text into two columns:
HTML Tables
tMyn

28. HTML Tables
tMyn

29. HTML Tables
tMyn

30. HTML Tables
tMyn

31. HTML Tables
tMyn

32. If we set the border value to 0, that gets us started.
The table we just dissected didn’t look like the typical table when we first viewed it.
One of the reasons is this is a seamless table, or one in which the cells are flush up against one another, without borders to separate them.
To turn a regular table into a seamless table, you must set several attributes in the table tag to 0, to eliminate any extra space around the table cells.
If we set the border value to 0, that gets us started.
HTML Tables
tMyn

33. Next example achieves exactly the same as the previous one but now using the external style sheet:
HTML Tables
tMyn

34. HTML Tables
tMyn

35. HTML Tables
tMyn

36. HTML Tables
tMyn

37. HTML Tables
tMyn

38. HTML Tables
tMyn

39. Let us modify the external style sheet:
The apparent problem with the previous example is that the text starts too near the left border in the first column.
Let us modify the external style sheet:
HTML Tables
tMyn

40. HTML Tables
tMyn

41. HTML Tables
tMyn

42. HTML Tables
tMyn

43. HTML Tables
tMyn

44. HTML Tables
tMyn

45. A nested table is one contained within the cell of another table.
This can be useful when you need to create a completely different table structure in one portion of a page, which cannot be incorporated into the structure of the rest of the page.
HTML Tables
tMyn