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
- 1Open up Notepad. This is the text editor. We have ours pinned to the taskbar of our Windows 8 system.
Advertisement - 2Click and hold a ".html" file. We have one called "visi.html" right on our desktop.
Advertisement - 3Drag the file on top of Notepad. The cursor will have a plus sign attached to it.
- 4Release 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.
- 5Double-click on the file on the desktop to open it in a browser.
- 6Look 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.
- 7Click 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.
- 8Add 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.
- 9Open the table row attribute. Type, "<tr>".
- 10Add another carriage return and six spaces.
- 11Close the table row attribute. Type, "</tr>".
- 12Look at the columns. We currently have two. This is important to remember, because we're going to add headers to those two columns.
- 13Place the cursor at the end of the line that reads, "<tr>".
- 14Create one carriage return and eight spaces.
- 15Add a "th" tag. Type, "<th>".
- 16Close the "th" tag on the same line. Type, "</th>".
- 17Highlight the entire row. Make sure to highlight the eight spaces preceding the text as well.
- 18Press "Ctrl" and "C" on the keyboard to copy. Alternatively, right-click and choose "Copy".
- 19Place the cursor at the end of the "th" tag row and add one carriage return.
- 20Press "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.
- 21Place the cursor between the opening and closing "th" tags on the first line of them.
- 22Type "Column 1".
- 23Repeat 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.
- 24In the top left corner, click "File" and "Save".
- 25Double-click on the file on the desktop.
- 26Look for the table headers. We have a header for both columns.
- 27Highlight 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.
- 28This 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
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
