Part 1 | Getting Started
4. HTML Tables
In this section of the guide we will examine HTML Lists and Tables. HTML Tables allow for the display of tabular data such as schedules, calendars, price lists and more. It is important to have a basic understanding of tables in order to create Web page designs that display tabular data.
– “Problems are often opportunities in disguise.”
HTML TABLES
HTML TABLES | HTML Example 5
HTML Tables are another important element in Web Design. Anyone who has ever seen an Microsoft Excel spreadsheet knows what a table looks like. HTML allows designers to build tables for a variety of information layout purposes. Tables provide the ability to display tabular data into price lists, schedules and many other applications.
The <table> tag defines an HTML table.
The <th> tags defines a table column heading.
The <tr> tags defines a table row.
The <td> tag defines a table row data cell.
HTML TABLE STYLES | HTML Example 5
HTML tables can use CSS to style the their appearance just like any other HTML tag. An example of CSS for tables might include a CSS Selector Group:
table,th,tr,td{
border-collapse: collapse;
border: 1px solid black;
padding: 8px;
}
Defining a CSS Selector Group to the table allows for sharing of some basic CSS declarations. In this rule the <table>, <th>, <tr>, <tr> tags all are sharing the following properties and values:
border-collapse: collapse
This defines the borders of each element of the table to be combined into one set of borders.
border: 1px solid black
This defines the border of each table element to be a black, 1px wide, solid line.
padding: 8px
This defines the space between the table element borders and the data cell content to be set to 8px.
Defining a CSS Selector Group to the table allows for sharing of some basic property and value declarations.
In this example, the group selector is defined in the <head> tag of the HTML as an internal style sheet to style the table and Inline Attributes are used to define individual elements of the table.
<table width=”100%”></table>
This defines the overall width of the table to be 100% of its parent HTML element. In this instance, the parent element is the row of the example column in this Web page layout.
<th colspan=”2″>Table Header 1</th>
This defines the number of columns a table header will span.
<td colspan=”2″>Row 1 Data 1</td>
This defines the number of columns a table data cell will span.
<td rowspan=”2″>Row 2 Data 1</td>
This defines the number of rows a table data cell will span.
HTML NEWSLETTERS
It is common for HTML Newsletters (Junk Mail) to use tables with an internal CSS style sheet to deliver a single Web page layout in an Email and ensure the layout displays properly. Therefore, it is important to know how to style tables with this method.
Note: Table CSS properties and values can also be defined globally as part of an external style sheet in an entire website and combined within different selectors to style individual tables.
HTML Example 5
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
table,th,tr,td{
border-collapse: collapse;
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<table width="100%">
<tr>
<th colspan="2">Table Header 1</th>
<th>Table Header 2</th>
</tr>
<tr>
<td colspan="2">Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td rowspan="2">Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
</tr>
</table>
</body>
Live Demo | Result:
| Table Header 1 | Table Header 2 | |
|---|---|---|
| Row 1 Data 1 | Row 1 Data 2 | |
| Row 2 Data 1 | Row 2 Data 2 | Row 2 Data 3 |
| Row 3 Data 1 | Row 3 Data 2 | |
Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.
Web Design Tools & Resources