Create Basic Table in HTML 5

Edited by Grimm, Rushell, Eng

You're watching VisiHow. In this tutorial, we are going to show you how to create your first table in HTML 5.


Steps

  1. 1
    To do this, go down to the task bar at the bottom of the screen and click on the Notepad icon. We've previously discussed how to add this icon to the task bar. We're using Notepad because it is a free text editor included with Windows 8, and it makes it very easy to learn basic foundation code. Then we will know how to code a web page without needing to resort to the use of tools or cheats.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Now, we're going to go over to the "visi.html" file located on the desktop.
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Left click and hold down on that file.
    Was this step helpful? Yes | No| I need help
  4. 4
    While holding down on the file, we can move it around.
    Was this step helpful? Yes | No| I need help
  5. 5
    We'll move the file into the open Notepad screen. At this point the mouse cursor icon will change into a black plus in a black box. This mean the contents will appear where we drop it.
    Was this step helpful? Yes | No| I need help
  6. 6
    Then let go of the mouse key to drop the file contents into Notepad.
    Was this step helpful? Yes | No| I need help
  7. 7
    We'll see the previous set of code that we have created. We are going to enter a table.
    Was this step helpful? Yes | No| I need help
  8. 8
    Click to place the cursor just after the "Heading" closing tag.
    Was this step helpful? Yes | No| I need help
  9. 9
    Since we already have a paragraph under "Heading 2", we'll enter a blank line below the "Para 2" tag.
    Was this step helpful? Yes | No| I need help
  10. 10
    Now, we'll type in four spaces, so the content remains below.
    Was this step helpful? Yes | No| I need help
  11. 11
    Then we're going to open our table by typing the "" attribute.
  12. 12
    Press ENTER to go to the next line.
    Was this step helpful? Yes | No| I need help
  13. 13
    Enter four spaces and type "
    Was this step helpful? Yes | No| I need help
  14. " to close the table attribute. As we mentioned in an earlier tutorial, it's very important to open and close tags so that we won't forget where we are, or forget to close a tag, and then see a page and realize we made a mistake.
    Was this step helpful? Yes | No| I need help
  15. 14
    Go back up to the end of the opening "" tag.
  16. 15
    Hit ENTER to insert another blank line.
    Was this step helpful? Yes | No| I need help
  17. 16
    This time we'll type six spaces.
    Was this step helpful? Yes | No| I need help
  18. 17
    Now, type in the "
  19. " attribute. This means table row.
  20. 18
    Once again, press ENTER to go to the next line.
    Was this step helpful? Yes | No| I need help
  21. 19
    Type in six spaces, then "
    Was this step helpful? Yes | No| I need help
  22. " to close the attribute. Each "tr" that we add will give us a new row in the table. in order to fill this row, we need to put in data. This is done with the "td" tag.
    Was this step helpful? Yes | No| I need help
  23. 20
    After the "
  24. " tag line, type ENTER to go to the next line.
  25. 21
    Then type in eight spaces and type "
  26. " to close it. This means row 1, column 1.
    Was this step helpful? Yes | No| I need help
  27. 25
    We'll add another one using the exact same format, "
  28. ". Now, we know that we are in row 1, column 2.
    Was this step helpful? Yes | No| I need help
  29. 26
    In order to see this, simply go up to the top of the screen and press "File", then "Save".
    Was this step helpful? Yes | No| I need help
  30. 27
    Now, our "visi.html" file will be updated, and we can double click on it to open the file.
    Was this step helpful? Yes | No| I need help
  31. 28
    Toward the middle of the document underneath "Para 2", we'll see the information we just entered, "This is R1 C1 This is R1 C2". Let's add another row, and then we'll show a little bit about formatting.
    Was this step helpful? Yes | No| I need help
  32. 29
    Click on the "x" in the top right corner of the "VisiHow HTML 5 Tutorial" file to close it.
    Was this step helpful? Yes | No| I need help
  33. 30
    To add another row, we'll highlight the entire "tr" attribute.
    Was this step helpful? Yes | No| I need help
  34. 31
    To copy, press Ctrl + C, or we could right click and select "Copy" from the pop-up menu.
    Was this step helpful? Yes | No| I need help
  35. 32
    At the end of the closing "
    Was this step helpful? Yes | No| I need help
  36. " tag, type ENTER to go to the next line.
    Was this step helpful? Yes | No| I need help
  37. 33
    To paste, press CTRL + V or right click and select "Paste".
    Was this step helpful? Yes | No| I need help
  38. 34
    Now, we have another set; however, this time it is "R2", the second row in our table. We'll need to change "R1" to "R2" on both lines.
    Was this step helpful? Yes | No| I need help
  39. 35
    We're going to go back up to the "File" menu at the top.
    Was this step helpful? Yes | No| I need help
  40. 36
    Then click "Save".
    Was this step helpful? Yes | No| I need help
  41. 37
    We'll go back over to our "visi.html" file on the desktop and double click to open it.
    Was this step helpful? Yes | No| I need help
  42. 38
    Now, we have "This is R2 C1 This is R2 C2". At the moment, however, there is no formatting to the table. Our discussion of formatting is part of another tutorial, so follow the link below to open the tutorial on formatting a table in HTML 5.
    Was this step helpful? Yes | No| I need help
  43. 39
    This concludes this tutorial on creating your first basic table in HTML 5. For additional information, helps, tips or suggestions, let us know in the comment section below. Otherwise, thanks for choosing VisiHow and have a great day.
    Was this step helpful? Yes | No| I need help
  44. Video: Create Basic Table in HTML 5

    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.

    User Reviews

    There is no user reviews.
    ".
  45. 22
    We'll keep the "td" information in line because it is similar to the "Heading" or "Para" attributes, where it's simply one line.
    Was this step helpful? Yes | No| I need help
  46. 23
    Each of the "td" lines makes up a cell, or column in our table, so we'll type "This is R1 C1" for the first one.
    Was this step helpful? Yes | No| I need help
  47. 24
    We'll type "
    Was this step helpful? Yes | No| I need help
  48. This is R1 C2
    Was this step helpful? Yes | No| I need help

Article Info

Categories : Software

Recent edits by: Rushell, Grimm

Share this Article:

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

Did this article help you?
 
x

Thank Our Volunteer Authors.

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