HTML Tables tMyn 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

• 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

<table>

</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.

Elementary tags for building a HTML Table:

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

• 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

• 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

• 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

• 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

• 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.