Styling Tables

The styling of tables so that the data in the data rows is centred seems to be an issue.

I am using a W3.css table and the local style section does not seem to want to work. There also seems to be a problem is getting the column widths to be fixed as per the W3C reference.

Once again, looking at the Help solved the problem and w3-centered does the job.

However, I might want to justify left

Tables on small screens

Even though I am using the W3.css framework there still seems to be an issue. The section width is set to 95% but having too many columns makes the table have a scroll bar.

The table above has 7 columns. I had to hide two of them. The burial register 6 down to 4 columns. This may be a question of the content of the cells but it seems to be a work-around for now.

The Formatting of the columns

Having added a few records to the Burial Register I see that the table is quite large. To enable navigation I felt that I had to add a record number for the entry. I didn't want to add another column as this would make the situation worse when it comes to small screens.

As I am using the standard W3.css table the column widths seem to work themselves out for themselves. I think that I could specify these widths. This would add to the complication of the code. I will put this off until I get the data entered for the Burial Register.

Cells with Hyperlinks

This also will need some working out. At the moment I am adding a hover style and making the text red.

However, to get the cell to be responsive across the whole cell I have added the disply: block attribute. This causes problems with the way that the text displays.

Column Widths

This is also something that I am trying to come to grips with. The Burial Register has varying number of columns depending on the screen size, However I still seem to get a problem on a small screen that the table hangs over the edge.

The example above seems to work just fine.

Below is the example from the W3C help pages where the age column is fixed at 20px.

Working with large tables

The burial register has a large table with many data rows. In formatting the source code for readability and editing means that it results in a large .html file. This is difficult to navigate in the editor.

When it comes to experimentation with formatting it is best to do so on a smaller table.