How to Create Tables with HTML5

Creating Tables with HTML 5

Tables have been a standard for HTML design since the 1990s. Tables were then replaced by DIV elements, which lay out HTML content without the restrictions of rows and columns. Some designers still use tables for some basic layouts, and you use them to display a spreadsheet of information to the user. You might also need to redesign a site that uses tables, so it's good to understand how they work.

When to Use Tables and When Not To

Web design used to call for tables to lay out pages. The designer would create one table and then use embedded tables within the main table's rows and columns to control the placement of HTML elements. This practice is no longer standard.

You use tables when you want to display lists of data. Tables give you the ability to list data with headers and footers. You can also use tables to display alternating colors within rows, which make it easier for the user to read the data. Tables also let you set a "hover" color, so the user intuitively knows which record he's clicking in your interface. These are a few reasons you use tables, but never use them to control placement of images, text or what is otherwise used with DIV tags.

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>

This web page displays a table with the grocery costs for the month. This table just displays one record (January) with a cost of $100.

Let's discuss the table structure. The table structure starts with an opening <table> tag. You can also set a table class to design the table with your CSS file. Think of a table as a spreadsheet. The spreadsheet has rows and columns, and the intersection of a row and column is a field. The field is where you store your data.

Introduced in later versions of HTML, this example table uses the "th" tag to indicate that the first row is the table's header. The browser renders a table header in bold and a slightly larger font by default to distinguish the header row from the others. Of course, you can override and set your own style for a table header row. In this example, the "Month" and "Cost" column headers are displayed in the first row.

Within the table tags are <tr> and <td> tags. These tags specify your rows, columns and fields. The <tr> tag contains <td> tags. These <td> tags are the fields in your spreadsheet. Notice that there are no column tags. That's because the <td> fields set your columns within the table. For each <td> tag, the browser knows to create a column.

It's important to keep track of the number of rows and columns you create with your tables. You can easily lose track of opening and closing tags, and accidentally missing a tag can render unforeseen results. Some browsers try to parse the table and figure out where rows and columns should be placed when table structure is invalid. The way a broken table is parsed depends on the browser, so always test your table structures in each browser before releasing code to the public.

Spanning Multiple Rows or Columns

Just like any spreadsheet, there are times when you want to have a row span multiple columns, or you might want a column to span multiple rows. You can span columns and rows using the "span" attribute in your HTML table code.

Let's take the following code as an example.

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>

We used the same table as the previous example. The difference in the above code is that the "colspan" attribute is set to 2. In this example, the table data field spans two columns, so both the "Month" and the "Cost" columns contain "January - $100" for their data.

You can use the span attribute in your rows as well. Let's take the same example and set the data to span multiple rows. The following code shows you how to use the rowspan attribute.

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>

Interested in learning more? Why not take an online Learn HTML - Create Webpages Using HTML5 course?

In this example, the first row spans two rows, and then the data row is displayed. You can mix and match span attributes within your tables, but you must remember to match the same number of rows and columns throughout the entire table. For instance, if you have three rows but only fill columns for two, your table won't render correctly.

CSS Styles for Tables

There are several table attributes that you might see in other website code, but many of the standard table properties were deprecated in HTML5. A few deprecated table attributes include bgcolor (background color for the table), border (sets a border for the table and its cells), cellpadding and cellspacing (set spacing for cells), and width (set the table's width).

There are several CSS styles you can use with table designs, but we'll review a few useful ones that will help you get started with HTML5 and your web designs. Let's use the previous example, and we'll add some CSS classes to the style tag.

<!DOCTYPE html>
<html>
<head>

<style>

table {
    border-collapse: collapse;
    border-spacing: 2px;
    border: 1px solid red;
}

</style>
<title>Your web page title</title>

We've used three CSS styles for the monthly grocery cost table. The first style is the "border-collapse" style. This style controls the way the cell's borders are displayed. They are either collapsed into one or shown separately around each cell.

The "border-spacing" property specifies the distance between two cells' border. You can collapse a cell's border but create spacing that distances the borders. They will still collapse, but they are farther apart from each other.

The final attribute in our CSS table class is the "border" style. This the width, type, and color for your table's border. Borders make it easier for the user to review large quantities of data, but the border should blend well with other table colors. The default color is black. If you set the border's width to 0 pixels, then setting a border color is unneeded since no border will display. It usually takes some tweaking to figure out what best color, style, and layout works best with your web design. Make sure you test your styles in each browser, because each browser renders tables differently.

This article discussed tables but remember to use them sparingly. You can use them for forms and long spreadsheets of data, but never use them to lay out a page. Table-less web designs are standard with DIV tags replacing tables as a way to place elements throughout a page. Tables make it easier to work with long lists of data, but they are cumbersome and difficult to use for page design.

Forms

Forms are HTML methods used to send data to and from your web viewer's browser. When you register on a website, send a file, or order ecommerce product, you're sending data using HTML forms. Forms have been a standard since older HTML versions, but there are a few new tags included with the updated HTML5 standards. You'll need to know how to work with forms, because most websites have at least one form that takes input from users and sends the data to a database or email address.

How Forms Work

Forms have three main parts. The first part is the opening <form> tag that tells the browser that input fields are rendered on the page. The second part tells the browser where to submit the data. This submission page is a property of the form tag. The third part is the form elements embedded in the form element tag.

Each form has a submission button. This button triggers processing for the form. Let's say a user fills out two form element text boxes that ask for a first and last name. When the user clicks the submission button, the data is sent from the user's computer to your web server. How you process the data is up to you and your programmers, but the data is sent to the web server so you can add it to a database, send the data to an email address, or create a file from the data. The way you manage form submission data is dependent on what you need to do with it.

One main issue associated with form data is the use of plain text versus encryption. When data is sent to your web server, it is sent over the Internet as plain text. If a malicious hacker has access to the data stream, he can read your data without any kind of decryption. You can see where this would be a problem if the user is transferring bank account or social security information. The answer to this problem is encryption. Encryption is used in the form of an SSL certificate. The SSL certificate is installed on the server, and it encrypts data between your users' browsers and the web server. Certificates also display in the browser with your corporate brand, so users know that they are connecting to the right server and not a phishing website.

Form Elements

Form elements are the text boxes, drop-down menus, radio buttons, check boxes, and buttons you see on the web page. Let's take a look at some HTML code that has a simple form asking users to enter a first and last name.

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>

</body>
</html>

This HTML example has the three main parts of a form: the form opening and closing tags, the action property, and the form elements. This example displays two text boxes to the user. The first text box is named "firstname" and the second text box is named "lastname." The placeholder attribute is a new HTML5 property. When the user sees these two form elements in the browser, the text "enter first name" or "enter last name" displays in the text boxes (depending on the text box). When the user clicks the text box, the text disappears. When the user enters a value into the text box, the placeholder text is replaced. The placeholder HTML5 property helps you explain to the user what must be entered into a text box to ensure that the data is accurate.

The processing page is set in the "action" property. The action property specifies what page on the web server collects the data entered by your user. You can use any type of backend language you want. In this example, the processing page is written in PHP. You can use C#, VB.NET, Ruby on Rails, or any other language that runs on the server. Notice also that the "method" attribute is specified. There are two action methods to choose from: "post" and "get." If you don't specify an action method, the default is "get." The "get" method appends the data to the end of the URL in querystring values we discussed in previous chapters. This is not the preferred standard to submit data, so most developers choose the "post" action method. Sending data using a URL string opens up chances for certain types of hacks (cross script hacking), and you have more control of the way data is submitted using the "post" method.

Finally, the input type "submit" element creates a submission button on the page. The text displayed to the user is "Submit Your Data," but you can have any text that helps your users quickly find the submission button. You want the submission button to stand out against other buttons on the page, or you create a poor user experience for your website visitors.

When the user clicks this button, the variables entered in the form are submitted to the processing page. You can process the data or send an error back to the user. For instance, if you set up a registration page, you might require the user to enter both a first and last name. If either one is not submitted, you send an error message back to the user and prompt him for all values a second time.

Let's add some HTML5 properties that you can use to enhance your form submissions. Take a look at the following code.

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>

</body>
</html>

We've used the previous code example and added several HTML5 attributes. First, notice the "autocomplete" property in the opening form tag. This prompts the browser to give the user the option to complete the form from previous form values. For instance, the user has probably entered his home address in previous forms. When the user starts entering his home address in the browser, the autocomplete option lets the user choose previously entered values. This saves the user time, and it offers a better user experience.

The other HTML5 property in the opening <form> tag is the novalidate boolean value. This value tells the browser not to validate the form values. For instance, you might want to collect any data entered by the user. The "novalidate" property submits the form with no validation regardless of the type or amount of data entered.

We've added the "autofocus" property in the "firstname" text box. The autofocus property highlights or emphasizes a particular form element and prompts the user to enter information. In this example, the first name is set as the focus. The user won't need to click the first name text box to begin entering data. Instead, this property automatically sets focus to the first name text box, so the user can just start typing instead of using the mouse. Just like the autocomplete property, the autofocus property makes a better user experience for your website visitors and customers.

These HTML5 form element attributes help you design better web page design and user interfaces. A better user experience helps guide the user when you need a form submitted. Frustrated users that are presented with poorly designed forms can lead to a loss of visitors and sales. Use the new HTML5 properties to make forms easier to understand, and make forms easy to use and clearly label each of your form elements.