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.


Ad

Steps

  1. 1
    Open up Notepad
    .
    This is the text editor. We have ours pinned to the taskbar of our Windows 8 system.
    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.
    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.
    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.
    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
    .
    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.
    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.
    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.
    Was this step helpful? Yes | No| I need help
  9. 9
    Open the table row attribute
    .
    Type, "<tr>".
    Was this step helpful? Yes | No| I need help
  10. 10
    Add another carriage return and six spaces
    .
    Was this step helpful? Yes | No| I need help
  11. 11
    Close the table row attribute
    .
    Type, "</tr>".
    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.
    Was this step helpful? Yes | No| I need help
  13. 13
    Place the cursor at the end of the line that reads, "<tr>"
    .
    Was this step helpful? Yes | No| I need help
  14. 14
    Create one carriage return and eight spaces
    .
    Was this step helpful? Yes | No| I need help
  15. 15
    Add a "th" tag
    .
    Type, "<th>".
    Was this step helpful? Yes | No| I need help
  16. 16
    Close the "th" tag on the same line
    .
    Type, "</th>".
    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.
    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".
    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
    .
    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.
    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
    .
    Was this step helpful? Yes | No| I need help
  22. 22
    Type "Column 1"
    .
    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.
    Was this step helpful? Yes | No| I need help
  24. 24
    In the top left corner, click "File" and "Save"
    .
    Was this step helpful? Yes | No| I need help
  25. 25
    Double-click on the file on the desktop
    .
    Was this step helpful? Yes | No| I need help
  26. 26
    Look for the table headers
    .
    We have a header for both columns.
    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.
    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

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

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

Article Info

Categories : Software

Recent edits by: 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