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.
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.
Now, we're going to go over to the "visi.html" file located on the desktop.
Left click and hold down on that file.
While holding down on the file, we can move it around.
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.
Then let go of the mouse key to drop the file contents into Notepad.
We'll see the previous set of code that we have created. We are going to enter a table.
Click to place the cursor just after the "Heading" closing tag.
Since we already have a paragraph under "Heading 2", we'll enter a blank line below the "Para 2" tag.
Now, we'll type in four spaces, so the content remains below.
Then we're going to open our table by typing the "
Press ENTER to go to the next line.
Enter four spaces and type "
" 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.
Go back up to the end of the opening "
Hit ENTER to insert another blank line.
This time we'll type six spaces.
Now, type in the "
" attribute. This means table row.
Once again, press ENTER to go to the next line.
Type in six spaces, then "
" 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.
After the "
" tag line, type ENTER to go to the next line.
Then type in eight spaces and type "
We'll keep the "td" information in line because it is similar to the "Heading" or "Para" attributes, where it's simply one line.
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.
" to close it. This means row 1, column 1.
We'll add another one using the exact same format, "
|This is R1 C2|
". Now, we know that we are in row 1, column 2.
In order to see this, simply go up to the top of the screen and press "File", then "Save".
Now, our "visi.html" file will be updated, and we can double click on it to open the file.
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.
Click on the "x" in the top right corner of the "VisiHow HTML 5 Tutorial" file to close it.
To add another row, we'll highlight the entire "tr" attribute.
To copy, press Ctrl + C, or we could right click and select "Copy" from the pop-up menu.
At the end of the closing "
" tag, type ENTER to go to the next line.
To paste, press CTRL + V or right click and select "Paste".
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.
We're going to go back up to the "File" menu at the top.
We'll go back over to our "visi.html" file on the desktop and double click to open it.
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.
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.
Video: Create Basic Table in HTML 5
Recent edits by: Rushell, Grimm