Add Headers to an HTML5 Table
Edited by Grimm, Amanda, Eng
You're watching VisiHow. In this tutorial, we are going to show you how to create table headers in HTML5.
Open up Notepad. This is the text editor. We have ours pinned to the taskbar of our Windows 8 system.
Click and hold a ".html" file. We have one called "visi.html" right on our desktop.
Drag the file on top of Notepad. The cursor will have a plus sign attached to it.
Release to drop the file in Notepad. We have our basic file, which we've created and been using for a number of HTML5 VisiHow tutorials.
Double-click on the file on the desktop to open it in a browser.
Look at how the table displays. This is our basic table. There are four separate cells. This represents two rows, and two columns. Let's close the browser now and add table headers. A table header is no different than any other table row, other than the fact that where we put it in the table will give us a different set of bolded information.
Click to place the cursor at the end of the opening table tag. It reads, "<table>". We want the table header to be in the beginning.
Add one carriage return and six spaces. For more details, be sure to check out our tutorial on how to properly format HTML5 code for easy reading and editing.
Open the table row attribute. Type, "<tr>".
Add another carriage return and six spaces.
Close the table row attribute. Type, "</tr>".
Look at the columns. We currently have two. This is important to remember, because we're going to add headers to those two columns.
Place the cursor at the end of the line that reads, "<tr>".
Create one carriage return and eight spaces.
Add a "th" tag. Type, "<th>".
Close the "th" tag on the same line. Type, "</th>".
Highlight the entire row. Make sure to highlight the eight spaces preceding the text as well.
Press "Ctrl" and "C" on the keyboard to copy. Alternatively, right-click and choose "Copy".
Place the cursor at the end of the "th" tag row and add one carriage return.
Press "Ctrl" and "V" or right-click and choose "Paste". In this tutorial, we are only doing this once, to create two identical lines that we will edit. This is because we have two columns, and need two headers. Repeat as needed to match the number of columns that need headers.
Place the cursor between the opening and closing "th" tags on the first line of them.
Repeat for the next line, typing "Column 2". This will give us the table header of Column 1 and Column 2, over our R1 C1 and R1 C2, and R2 C1 and R2 C2. Those are our rows for the table.
In the top left corner, click "File" and "Save".
Double-click on the file on the desktop.
Look for the table headers. We have a header for both columns.
Highlight the whole table, including headers. The highlighting is broken up, showing the boundaries of the individual data cells or data elements. Obviously, this is still a pretty ugly table. It's not actually formatted. We will get to the table formatting in another tutorial.
This concludes our tutorial on adding table headers to your HTML5 table. Thanks for watching VisiHow. If you've got questions or comments about this, or other tutorials, you can leave them in the section below this video. Make sure to watch some of our other HTML5 tutorials, as we do discuss all of the various options for tables. We have a full range of HTML5 tutorials for you. Thanks very much, and have a great day.
Video: Add Headers to an HTML5 Table
Recent edits by: Amanda, Grimm