Add Headers to an HTML5 Table

Edited by Grimm, Amanda, Eng, Anonymous

You're watching VisiHow. In this tutorial, we are going to show you how to create table headers in HTML5.

Add table headers to a table in HTML5.mp4-canvas164 706667.jpg

Ad

Steps

  1. 1
    Open up Notepad.
    This is the text editor. We have ours pinned to the taskbar of our Windows 8 system.
    Add table headers to a table in HTML5.mp4-canvas13 08392.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  2. 2
    Click and hold a ".html" file.
    We have one called "visi.html" right on our desktop.
    Add table headers to a table in HTML5.mp4-canvas24 63687.jpg
    Advertisement
    Was this step helpful? Yes | No | I need help

  3. 3
    Drag the file on top of Notepad.
    The cursor will have a plus sign attached to it.
    Add table headers to a table in HTML5.mp4-canvas29 075863.jpg
    Was this step helpful? Yes | No | I need help

  4. 4
    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.
    Add table headers to a table in HTML5.mp4-canvas35 837802.jpg
    Was this step helpful? Yes | No | I need help

  5. 5
    Double-click on the file on the desktop to open it in a browser.
    Add table headers to a table in HTML5.mp4-canvas43 899754.jpg
    Was this step helpful? Yes | No | I need help

  6. 6
    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.
    Add table headers to a table in HTML5.mp4-canvas47 343735.jpg
    Was this step helpful? Yes | No | I need help

  7. 7
    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 table headers to a table in HTML5.mp4-canvas79 02454.jpg
    Was this step helpful? Yes | No | I need help

  8. 8
    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.
    Add table headers to a table in HTML5.mp4-canvas86 259458.jpg
    Was this step helpful? Yes | No | I need help

  9. 9
    Open the table row attribute.
    Type, "<tr>".
    Add table headers to a table in HTML5.mp4-canvas91 590371.jpg
    Was this step helpful? Yes | No | I need help

  10. 10
    Add another carriage return and six spaces.
    Add table headers to a table in HTML5.mp4-canvas94 325374.jpg
    Was this step helpful? Yes | No | I need help

  11. 11
    Close the table row attribute.
    Type, "</tr>".
    Add table headers to a table in HTML5.mp4-canvas96 433361.jpg
    Was this step helpful? Yes | No | I need help

  12. 12
    Look at the columns.
    We currently have two. This is important to remember, because we're going to add headers to those two columns.
    Add table headers to a table in HTML5.mp4-canvas103 029321.jpg
    Was this step helpful? Yes | No | I need help

  13. 13
    Place the cursor at the end of the line that reads, "<tr>".
    Add table headers to a table in HTML5.mp4-canvas106 338267.jpg
    Was this step helpful? Yes | No | I need help

  14. 14
    Create one carriage return and eight spaces.
    Add table headers to a table in HTML5.mp4-canvas108 877272.jpg
    Was this step helpful? Yes | No | I need help

  15. 15
    Add a "th" tag.
    Type, "<th>".
    Add table headers to a table in HTML5.mp4-canvas111 624235.jpg
    Was this step helpful? Yes | No | I need help

  16. 16
    Close the "th" tag on the same line.
    Type, "</th>".
    Add table headers to a table in HTML5.mp4-canvas113 446225.jpg
    Was this step helpful? Yes | No | I need help

  17. 17
    Highlight the entire row.
    Make sure to highlight the eight spaces preceding the text as well.
    Add table headers to a table in HTML5.mp4-canvas117 143203.jpg
    Was this step helpful? Yes | No | I need help

  18. 18
    Press "Ctrl" and "C" on the keyboard to copy.
    Alternatively, right-click and choose "Copy".
    Add table headers to a table in HTML5.mp4-canvas120 275205.jpg
    Was this step helpful? Yes | No | I need help

  19. 19
    Place the cursor at the end of the "th" tag row and add one carriage return.
    Add table headers to a table in HTML5.mp4-canvas122 385192.jpg
    Was this step helpful? Yes | No | I need help

  20. 20
    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.
    Add table headers to a table in HTML5.mp4-canvas125 950192.jpg
    Was this step helpful? Yes | No | I need help

  21. 21
    Place the cursor between the opening and closing "th" tags on the first line of them.
    Add table headers to a table in HTML5.mp4-canvas130 378124.jpg
    Was this step helpful? Yes | No | I need help

  22. 22
    Type "Column 1".
    Add table headers to a table in HTML5.mp4-canvas135 72509.jpg
    Was this step helpful? Yes | No | I need help

  23. 23
    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.
    Add table headers to a table in HTML5.mp4-canvas138 056097.jpg
    Was this step helpful? Yes | No | I need help

  24. 24
    In the top left corner, click "File" and "Save".
    Add table headers to a table in HTML5.mp4-canvas152 202994.jpg
    Was this step helpful? Yes | No | I need help

  25. 25
    Double-click on the file on the desktop.
    Add table headers to a table in HTML5.mp4-canvas154 331961.jpg
    Was this step helpful? Yes | No | I need help

  26. 26
    Look for the table headers.
    We have a header for both columns.
    Add table headers to a table in HTML5.mp4-canvas168 215879.jpg
    Was this step helpful? Yes | No | I need help

  27. 27
    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.
    Add table headers to a table in HTML5.mp4-canvas165 215879.jpg
    Was this step helpful? Yes | No | I need help

  28. 28
    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.
    Was this step helpful? Yes | No | I need help

    Advertisement

Video: Add Headers to an HTML5 Table

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Grimm
Featured Author
811 Articles Started
3,555 Article Edits
154,415 Points
Grimm is a featured author with VisiHow. Grimm has achieved the level of "Colonel" with 154,415 points. Grimm has started 811 articles (including this one) and has also made 3,555 article edits. 2,046,000 people have read Grimm's article contributions.
Grimm's Message Board
Grimm: Hi, my name is Grimm.
Grimm: Can I help you with your problem about "Add Headers to an HTML5 Table"?
 

Article Info

Categories : Software

Recent edits by: Eng, Amanda, Grimm

Share this Article:

Thanks to all authors for creating a page that has been read 197 times.

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No