Basic table
The HTML table element should be used for any data that needs to displayed in a logical matrix of columns and rows, similar to a Microsoft Excel spreadsheet. A table could be used for a price comparison chart, a list of movies and their times, or a calendar of events. The list is almost endless.One thing tables should never be used for is page layout. They should not contain navigation or site content, unless it is being pulled from a database and meant to be displayed as tabular data. One of the problems with the web as it was going through its adolescence was an overuse of tables for styling and layout. Now that CSS works predictably on all modern browsers (except, of course Microsoft's Internet Explorer) tables can finally be used as they were meant to be: in order to display information in an orderly way.
Writing tables can be a bit intimidating at first. An HTML table requires 3 elements to function:
The <table> </table> element, which is the whole table.
The <tr> </tr> element which defines a table row.
The <td> </td> element which defines a cell in a row.
With these three elements and CSS styling, we can create any kind of table. Let's look at an example of a simple table without styling:
<table>
<tr> <!--starting first row-->
<td>This is first cell </td>
</td><!--End of first row-->
</table><!-- End of table-->
By adding various styling options, we can make the table much more readable and less like a spreadsheet. Note the CSS in this sample: we can style rows <tr> and cells <td> separately, but the usual CSS cascade rules apply since the <td> is a child of the <tr>, it will inherit the <tr> properties.
Tables are also great for creating calendars that display not only the day and date, but information like events or appointments. Using a table makes it easier to digest this information and it allows us to make the information look good, as well.
It is good to understand how <table> works. For example, this LMS we use only works with tables. I have to put all the information in a table structure within this display area. The program will overwrite my style sheet unless I use inline styling for tables.
Writing tables can be a bit intimidating at first. An HTML table requires 3 elements to function:
The <table> </table> element, which is the whole table.
The <tr> </tr> element which defines a table row.
The <td> </td> element which defines a cell in a row.
With these three elements and CSS styling, we can create any kind of table. Let's look at an example of a simple table without styling:
<table>
<tr> <!--starting first row-->
<td>This is first cell </td>
</td><!--End of first row-->
</table><!-- End of table-->
By adding various styling options, we can make the table much more readable and less like a spreadsheet. Note the CSS in this sample: we can style rows <tr> and cells <td> separately, but the usual CSS cascade rules apply since the <td> is a child of the <tr>, it will inherit the <tr> properties.
Tables are also great for creating calendars that display not only the day and date, but information like events or appointments. Using a table makes it easier to digest this information and it allows us to make the information look good, as well.
It is good to understand how <table> works. For example, this LMS we use only works with tables. I have to put all the information in a table structure within this display area. The program will overwrite my style sheet unless I use inline styling for tables.