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.
Steps
- 1This is the text editor. We have ours pinned to the taskbar of our Windows 8 system.Open up Notepad.
Advertisement - 2We have one called "visi.html" right on our desktop.Click and hold a ".html" file.
Advertisement - 3The cursor will have a plus sign attached to it.Drag the file on top of Notepad.
- 4We have our basic file, which we've created and been using for a number of HTML5 VisiHow tutorials.Release to drop the file in Notepad.
- 5Double-click on the file on the desktop to open it in a browser.
- 6This 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.Look at how the table displays.
- 7It reads, "<table>". We want the table header to be in the beginning.Click to place the cursor at the end of the opening table tag.
- 8For more details, be sure to check out our tutorial on how to properly format HTML5 code for easy reading and editing.Add one carriage return and six spaces.
- 9Type, "<tr>".Open the table row attribute.
- 10Add another carriage return and six spaces.
- 11Type, "</tr>".Close the table row attribute.
- 12We currently have two. This is important to remember, because we're going to add headers to those two columns.Look at the columns.
- 13Place the cursor at the end of the line that reads, "<tr>".
- 14Create one carriage return and eight spaces.
- 15Type, "<th>".Add a "th" tag.
- 16Type, "</th>".Close the "th" tag on the same line.
- 17Make sure to highlight the eight spaces preceding the text as well.Highlight the entire row.
- 18Alternatively, right-click and choose "Copy".Press "Ctrl" and "C" on the keyboard to copy.
- 19Place the cursor at the end of the "th" tag row and add one carriage return.
- 20In 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.Press "Ctrl" and "V" or right-click and choose "Paste".
- 21Place the cursor between the opening and closing "th" tags on the first line of them.
- 22Type "Column 1".
- 23This 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.Repeat for the next line, typing "Column 2".
- 24In the top left corner, click "File" and "Save".
- 25Double-click on the file on the desktop.
- 26We have a header for both columns.Look for the table headers.
- 27The 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.Highlight the whole table, including headers.
- 28Thanks 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.This concludes our tutorial on adding table headers to your HTML5 table.
Video: Add Headers to an HTML5 Table
If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.
Comments
Article Info
Categories : Software
Recent edits by: Amanda, Grimm
