Create Basic Table in HTML 5

Edited by Grimm, Rushell, Anonymous, 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

    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



    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,055,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 "Create Basic Table in HTML 5"?
     

    Article Info

    Categories : Software

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