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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  40. 36
    Then click "Save"
    .
    Create your first basic table in HTML 5.mp4-canvas236 645018.jpg
    Was this step helpful? Yes | No
  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
  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
  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
    Advertisement
  44. Video: Create Basic Table in HTML 5

    If you have problems with any of the steps in this article, please 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
  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
  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
  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.