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.

Create your first basic table in HTML 5.mp4-canvas178 593264.jpg

Ad

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.
    Create your first basic table in HTML 5.mp4-canvas12 72.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas34 558.jpg
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Left click and hold down on that file
    .
    Create your first basic table in HTML 5.mp4-canvas39 978.jpg
    Was this step helpful? Yes | No| I need help
  4. 4
    While holding down on the file, we can move it around
    .
    Create your first basic table in HTML 5.mp4-canvas42 879.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas44 439.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas56 39.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas59 83.jpg
    Was this step helpful? Yes | No| I need help
  8. 8
    Click to place the cursor just after the "Heading" closing tag
    .
    Create your first basic table in HTML 5.mp4-canvas73 248.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas78 572.jpg
    Was this step helpful? Yes | No| I need help
  10. 10
    Now, we'll type in four spaces, so the content remains below
    .
    Create your first basic table in HTML 5.mp4-canvas88 174.jpg
    Was this step helpful? Yes | No| I need help
  11. 11
    Then we're going to open our table by typing the "" attribute.
    Create your first basic table in HTML 5.mp4-canvas92 855.jpg
    Was this step helpful? Yes | No| I need help
  12. 12
    Press ENTER to go to the next line
    .
    Create your first basic table in HTML 5.mp4-canvas95 114.jpg
    Was this step helpful? Yes | No| I need help
  13. 13
    Enter four spaces and type "
  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.
    Create your first basic table in HTML 5.mp4-canvas99 595.jpg
    Was this step helpful? Yes | No| I need help
  15. 14
    Go back up to the end of the opening "" tag.
    Create your first basic table in HTML 5.mp4-canvas111 273.jpg
    Was this step helpful? Yes | No| I need help
  16. 15
    Hit ENTER to insert another blank line
    .
    Create your first basic table in HTML 5.mp4-canvas114 734.jpg
    Was this step helpful? Yes | No| I need help
  17. 16
    This time we'll type six spaces
    .
    Create your first basic table in HTML 5.mp4-canvas118 877.jpg
    Was this step helpful? Yes | No| I need help
  18. 17
    Now, type in the "
  19. " attribute. This means table row.
    Create your first basic table in HTML 5.mp4-canvas123 895.jpg
    Was this step helpful? Yes | No| I need help
  20. 18
    Once again, press ENTER to go to the next line
    .
    Create your first basic table in HTML 5.mp4-canvas126 736.jpg
    Was this step helpful? Yes | No| I need help
  21. 19
    Type in six spaces, then "
  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.
    Create your first basic table in HTML 5.mp4-canvas130 376.jpg
    Was this step helpful? Yes | No| I need help
  23. 20
    After the "
  24. " tag line, type ENTER to go to the next line.
    Create your first basic table in HTML 5.mp4-canvas139 112.jpg
    Was this step helpful? Yes | No| I need help
  25. 21
    Then type in eight spaces and type "
  26. " to close it. This means row 1, column 1.
    Create your first basic table in HTML 5.mp4-canvas172 052666.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas186 953686.jpg
    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"
    .
    Create your first basic table in HTML 5.mp4-canvas193 232686.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas198 716686.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas201 934686.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas210 126686.jpg
    Was this step helpful? Yes | No| I need help
  33. 30
    To add another row, we'll highlight the entire "tr" attribute
    .
    Create your first basic table in HTML 5.mp4-canvas215 943352.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas219 385352.jpg
    Was this step helpful? Yes | No| I need help
  35. 32
    At the end of the closing "
  36. " tag, type ENTER to go to the next line.
    Create your first basic table in HTML 5.mp4-canvas222 163685.jpg
    Was this step helpful? Yes | No| I need help
  37. 33
    To paste, press CTRL + V or right click and select "Paste"
    .
    Create your first basic table in HTML 5.mp4-canvas226 845685.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas234 103018.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas235 708018.jpg
    Was this step helpful? Yes | No| I need help
  40. 36
    Then click "Save"
    .
    Create your first basic table in HTML 5.mp4-canvas236 645018.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas238 506018.jpg
    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.
    Create your first basic table in HTML 5.mp4-canvas244 026018.jpg
    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
    Advertisement
  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.
    ".
    Create your first basic table in HTML 5.mp4-canvas143 953.jpg
    Was this step helpful? Yes | No| I need help
  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
    .
    Create your first basic table in HTML 5.mp4-canvas148 453.jpg
    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
    .
    Create your first basic table in HTML 5.mp4-canvas169 349666.jpg
    Was this step helpful? Yes | No| I need help
  47. 24
    We'll type "
  48. This is R1 C2

    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.

x

Thank Our Volunteer Authors.

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