This is not a tutorial on how to write a HTML web page. It is a specific attempt to develop a better understanding of TABLES. Tables are one of the most useful tools for creating a simple web page for displaying information. It is the single most used method of displaying records in a column format. The USGenWeb Archives presentations are built around the use of the table to display records. These pages should provide you with an easy reference on building tables.
All tables have to start with the <table> element. Each table is then divided into rows (with the <tr> element), and each row is divided into data cells (with the <td> element or the <th> element for the first row used for your headers). These two elements are interchangeable with the difference being that all major browsers automatically display the text in the <th> element as bold and centered. The letters "td" stand for "table data", which is the text content of a data cell and "th" stands for "table header". A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, other tables, etc. Below are a few notes about the use of tables:
- Tables can be any size, but should be sized to fit the page for best viewing by researchers.
- Tables can contain as many rows as it takes to display your data.
- Table rows can contain as many data cells as it takes to display the data in a "readable manner".
- Data cells should be sized to fit the data content that is displayed.
- The design of data cells in the rows of a table is the most common problem associated with creating a nice table display.
- Table styles can be defined in your CSS file or in the table element on your page or both. I like to define the primary style for a table in my CSS file, i.e., border size and color and width and height if you plan to make all of your tables the same on each page. Remember that you can change the CSS styles for any element by adding different styles in a specific element in your table. The element styles defined on your page will take precedent over the styles defined in the CSS file.
CSS is a great tool to help control the style and layout of multiple web pages all at once. It will save you a lot of typing when developing the web page by eliminating the redundant style descriptions for the content of your pages. I am not going to define CSS usage much in this tutorial unless it is needed to assist with building tables. You can find a tutorial at w3schools.com CSS TUTORIAL which can assist you in understanding how to use CSS for your pages.
The following pages will help you to understand how to build suitable tables for displaying your data on your web pages.
Much of the information in this tutorial comes from the w3schools.com TABLES TUTORIAL with comments and examples added as needed..