We often deal with data best understood when it appears in ordered rows and columns. We understand grids like Calendars, Schedules and so on. But when HTML first appeared, there was no easy way to format data this way. The <table> tag finally came along in HTML 3, back in 1995, and was quickly adopted, especially in Education, and in the budding eCommerce industry. Now we could have all of our classes in one column, and all of their times in another, without having to resort to endless characters.
| HTML Training Schedule | ||||
HTML I |
M-W-F |
Hiatt |
2:30p-4:30p |
NMC |
HTML II |
Tu-Th |
Hiatt |
10:00am-Noon |
NMC |
CSS |
Sat-Sun |
Hiatt |
2:00pm-3:30pm |
NMC |
Dreamweaver |
M-W-F |
Hiatt |
10:00am-Noon |
NMC |
Here, we see a course schedule. Across the top, we see a header with all of the cells collapsed into a single box, holding a description of the information provided in the table. In this table, individual classes are listed in rows, their constituent items are presented in columns.
So, the first box of the first row (and the first box of every row) contains the name of the class. In the second column, we always only find days of the week the courses are offered. The third column lists the name of the (terrific) instructor for the classes, followed in the fourth column with times the classes are available and in the last column, the location where each class is taught. Sometimes Tables will be built so we see a row of sub-headings that explain each of the columns in that way, with a row of cells between "HTML Training Schedule" and the actual data, indicating "Class", "Days", "Teacher", "Times" and "Location".
There are a wide variety of Tables in HTML. We can have tables with specific headers and bodies, just as our web pages are organized, or simply with just rows and columns of data. The data presented can also be anything. We commonly see paragraph text, links, photos or other graphics and often even raw text.
We can, of course, style our Tables. Using CSS, we can style individual cells or rows or columns or all of the cells and all of the rows in ways we could not do just a few years ago. The results are very pleasing now, and can be much easier for your page visitors to understand, through the use of different colors and fonts.
