A table actually isn’t a single tag, but is made up of several tags working together. Some of these tags are required, however, most are optional. Now tables are a bit unique because of the number of optional tags you can define, and how that will help you design and improve the usability of the table.
<table>
For the table container itself, we have a <table> tag set. Both sets need to be there for a proper table, as well as all the associated tags.
This tag set is required and surrounds the table. One might think you define the number of columns or rows inside this tag, but you do not. Its child tags help define the rows and columns.
A <table> tag set will utilize one or more sets of <tr> tags, and <th> and/or <td> tags. Each of these will be looked at next. All other tags are optional.
<tr> Tags
Before we can start to define any cells to store data, we need to define the table row. By defining the rows, we get to organize our data into rows and columns. Each row, as specified by the <tr>, or table row tag, will contain a series of header or data cells. Each of those cells will help define how many columns exist.
A <tr> tag can exist as a child of a <table>, or if you are using the organizational structures, <thead>, <tbody>, and <tfoot> tags.
A <tr> tag’s children must consist of only <th> and <td> tags. It must have those children as the <tr> tag cannot contain any raw data itself.
You can style your <tr> tags. The most common method is to specify background color in a class. This is often to either highlight a specific row, or to provide an alternating pattern by applying a slight shade difference to odd and even rows. The purpose, of course, being to make it slightly easier to read large amounts of tabular data.
This can be as simple as creating a class, or classes, like the ones you see below.
tr.odd {
background-color: #eee;
}
tr.even {
background-color: #fff;
}
tr.highlight {
background-color: yellow;
font-weight: bold;
}Of course, this requires that you build out your table rows adding classes to all of the rows. This is potentially time consuming, and requires all you to update each row if you add or remove a row from any place besides the end.
Luckily CSS has a special pseudo-class selector to make this easier, the nth-child selector. Here we can apply the pseudo-class and make it so the computer does the repeatable work of applying the right class. And that’s what we really want.
Consider the following, but with the updated selectors.
tr:nth-child(odd) {
background-color: #eee;
}
tr.nth-child(even) {
background-color: #fff;
}
tr.highlight {
background-color: yellow;
font-weight: bold;
}It’s a few more letters to write initially, but overall, it’s much simpler for you to implement.
<th> Tags
The <th> tag defines cells that will be used as a table header cell. These cells are normally found along either the top row of the table and/or the far left column and are used to provide context about the data stored in a cell.
Consider the example of the TV schedule, <th> cells could be used across the top to show the times in a highlighted format and the left side, to show the channels.
Table header cells are not required to be in a table, however, they generally improve the usability.
By default the text is bold and centered, however, you can style them with CSS to change most of the standard properties.
<td> Tags
The <td> tag is to create a cell in the table to store your data. They are referred to as table data cells. While not a required element, tables without <td> tags are pretty useless.
A <td> tag can contain any type of data. The browser displays it as standard text by default, unless you use a child tag to wrap your data. While you can use child tags, such as <p> and other tags, it is rare. Instead, you should work on keeping the data simple enough to not need that type of information.
Each column will try to be the same width, however as differing amounts of data are in each cell, some columns might be made to be wider than others. In an HTML table, all of the cells of a table will be the same width, and all the cells in a row will be the same height, unless the table cell spans multiple rows or columns.
What Makes up a Table (Tags) was originally found on Access 2 Learn
