AWF - Web Tables [LESSON]

Web Tables

Using Tables in Web Design

Web designers are always thinking of options and features to showcase data on a website. You have discovered how image maps can be used to provide information while adding visual appeal to a web page. How can you, as a web designer, avoid using too much text on a page? Have you thought about using tables to display data? If that has not been a consideration, you now will have the opportunity to experience this option. Tables are made of columns and rows, using a table can help you control the location of your content.

This module will provide you with guidelines for table use as it relates to web design. You will learn how to create and format tables with HTML attributes. Adding tables using a GUI editor is easy, you add tables or grids using the editor menu.  In this lesson, you are going to learn about adding HTML tables so if you need to create your own table you will know how. You can code in the customizing area on the site, or you can write the code in a text editor and transfer it to a GUI editor if needed.  Tables are used a lot in web design, they used to be a major way of laying out your page, before grid, float, and the other methods we've learned about. Tables are still used for layout by a lot of developers.

Showcase Content in Tables

Adding content to a table is another method to provide information to your target audience. The use of tables makes it easy for users to obtain information rapidly because columns and headings are defined to showcase the data. Many web designers use tables when creating price lists or providing statistical data.  

Table Structure

When you add the markup container for tables in your HTML 5 document, the <table> element is utilized. Tables won't display borders unless you indicate a border in your CSS.  The default border is a double line border, so to make it a single line border you must collapse the borders into a single line. 

All HTML tables start with the <table> element. You MUST have the <table> element.  If you want a caption for the table (this can be used as the title of the table or as information about the table), then you enter it with the <caption> element immediately after the <table> element.  You can style the caption to have a different font, size, or color. You don't have to have a caption on your tables, especially if you are using the table to place content, you may not want it to look like a table. Every table must have at least one table row, these go horizontally.  The table row element is <tr>.  To create the columns, you enter either table headers <th> or table data <td> tags.  The highest number of either of these tags you have in any of your rows will determine the number of columns for the entire table.  See the table below for common table tags:

Common Table Tags

Element Tag	Element Purpose
<table></table>	Tells the browser that the following content is in a table.
<caption></caption>	Used for the title or additional information about the table. Must be placed immediately after the <table> tag.
<tr></tr>	Table row
<th></th>	Table header – this can be used across the top of columns or on the first column to head rows.  The information in this tag will be bold and centered by default.
<td></td>	Table data – These are used for the table cells, there should be one set for each cell (other than cells that use the <th> tag). The data will be left-aligned and not bold unless the CSS has been set otherwise.
<colgroup></colgroup>	Sets a group of one or more columns – this is used so the columns can be easily formatted using CSS.
<col></col>	Allows you to style each column in the <colgroup>.
<thead></thead>	Allows you to group the content in the header of the table.
<tbody></tbody>	Allows you to group the content in the body of the table.
<tfoot></tfoot>	Allows you to group the content in the footer of the table.

For more details on elements that are used to structure a data table, access the Table Design learning object below.

Formatting Tables

Now that you have an understanding of how to create a data table, it will benefit you to know how the table can be formatted to emphasize the data that is displayed.   The table below reflects several options that can be applied to format data tables.

Formatting Data Tables Options

Format Option	Property and Value Example	Description
Border	border: 2px solid blue	Allows you to style the border, you can set the size, color, and border style. There are several border styles such as solid, dotted, dashed, double, inset, outset, etc. For each value you just list it and put a space between each.
Collapse Table Border	border-collapse: collapse	Establishes whether the borders are collapsed into a single border or disconnected.
Span Columns	colspan="4"	Merges cells across several columns. The example would merge 4 columns into one cell.
Span Rows	rowspan="3"	Merges cells across several rows. The example would merge 3 rows into one cell.
Padding	padding: 10px	Padding is space between the cell edges and cell content. The example would put 10 pixels of padding all the way around the cell.  You can specify to add padding to any part of the cell (top, right, bottom, left).
Spacing	border-spacing: 20px	Cell spacing is the space between each cell. The example would put 20 pixels of space between each cell.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION