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
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
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
First table example employs some elementary tags: HTML Tables tMyn
HTML Tables tMyn
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
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
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
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
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
We can add the colspan attribute to a td or th tag to merge cells across two or more columns: HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
Likewise we can add the rowspan attribute to a td or th tag to merge cells across two or more rows: HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
Next example modifies the Nordic countries table by implementing external style sheet: HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
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
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
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
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
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
Next example achieves exactly the same as the previous one but now using the external style sheet: HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
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
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
HTML Tables tMyn
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