The HTML Table Element

The HTML Table Element is a useful way of presenting information on the screen. It is also (over)used to format text and images. In many cases the formatting of other Elements on a webpage is better achieved using CSS.

When representing the contents of an actual table, a table is just the job.

The table above does not valiate as the border should be specified in CSS.
Need to add an internal STYLE redefinition for the TABLE tag.

The use of a table for the display of information that should align in a grid is acceptable while the use of a table to get elements to appear on the screen in a particular postition (i.e. layout) is not.

Responsive behaviour

The table element is not inherrently responsive. The Responsive Table described on many websites such as the the W3C Schools and MDN are not what I am looking for in a responsive design. Simply adding a scrollbar does not make a table responsivein my opinion.

This is also coupled with the notion that you can use the TABLE element to format pages. There are many places on the Internet that tell you why you should not use tables to format the layout of a page. I have a few links below.

The "traditional" responsive table could be used on the St. Mary's page. I am also developing a table of Monarchs of England

A table using the W3 CSS Framework for formating

This is a prototype for the table of monarchs. The start was the w3-table-all class which gives a border, alternating row backgrounds(striped) an a border around the table. I don't really need the borders in this case and the standard HTML table would probably suffice.

However, the use of W3.css for the possible adding of a hover effect (again, not needed for my list of monarchs as it is for mobile/touch display). The addition of the hyperlink and the text-decoration:none; display: block; cursor:default; styling shows below. The cursor shows where the hyperlink is "hot" in the change in cursor for William I and Henry I, William II does not have a page and a link to it.

Adding rows to the table (in editing) is easier when the tr element is split over multiple lines.

Not all monarchs have their own page and I am in the process of auditing the timeline links. For the interim the page for history_nav is being completed.

The thead tag

I am not sure how this works with these tables. I think that the W3C explaination is incorrect. I may have to refer to the MDN pages. The same discussion about tfoot could be had. The concept of Sematics with respect to CSS (JavaScript, HTML and other elements)

Single Column

Links on page