Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be walking you through the process used to create tables in an HTML document.
Once you've opened your HTML editor and have started a new HTML document, the next step in the process is gathering the content we are going to mark up for this tutorial.
To do so, go back to the HTML homepage, find and click the link that says "click this link to access the text used in the following tutorials."
Scroll down to where it says creating basic tables, highlight that bit of the content, and copy it.
Next we'll be adding it to our HTML document.
Once you've copied the content we are going to be using today's tutorial, the next step in the process is adding the content to our HTML document.
To do so, find the open and closed body tag, give yourself a little room, and then simply paste the content you copied into that open area.
Next we're going to change the title of our document, we're going to call this fifth HTML document, and then we're going to go ahead and save our work.
I'm gonna call this five, and, again, I'm going to save this to my desktop for easy reference.
Next I'm going to go ahead and add a heading to my document.
So I'm going to go ahead and surround "Creating Basic Tables" with an h1 tag.
Alright, let's go ahead and save our file and then let's head over to our Internet browser.
Let's open our file so that we can see what's going on.
As you can see, we do have a heading, and we have some content that we want to eventually turn into a table.
What we're eventually going to do in this tutorial is we're gonna turn the days of the week into our table headings and then we're going to turn the numbers into table rows. In other words, we're going to create a very small, mini calendar.
So let's head back to our HTML editor and let's start the process of building our table.
Adding tables to an HTML document is a somewhat complicated process.
Like listS, what we have to do is we actually have to define what we're building and then we have to nest a bunch of different HTML tags within each other.
So, to start the process, the first thing we need to do is we need to add a table tag, and then we want to make sure that we close our table, so that we're not converting our entire document into a giant table.
When building tables in HTML, we have to keep track of two different things.
We have to keep track of what is going to be our table rows and then we have to keep track of what's going to be in our individual table cells.
To do so, I like to give myself a little visual space.
So I'm going to tab over one, I'm going to add our first table row, which is the tr tag.
I'm then going to close out my first table row.
Inside our table row, then, we need to add a few tables cells.
As you can see, based on our content, we are going to have seven different table cells.
So what we need to do is we need to add each of those cells individually.
Here, again, I'm going to tab over so that I know what's inside what.
So inside our first table row, we want some headings and what we're going to add is we're going to add the th tag, which stands for table heading.
We're then going to closeout that TH tag
We know we have seven of these, so I'm gonna go ahead and copy this, and paste it in until we have seven different table cells.
Ok, next what I am going to do is I'm going to go ahead and cut and paste our days of the week into our table heading tags or into our cells.
Ok, let's take a look at what we've got so far, so let's save our document, let's go over to our Internet browser, and let's refresh our page.
As, you can see, we now have table headings. They're set up for us.
In order to see what's going on, however, we want to add a border to our table.
So, if we go back to our HTML editor, what I'm going to do is I'm going to add what is called an attribute to our table tag.
Attributes, as I'll explain in the next tutorial, can be added to just about any HTML element.
Here, what we're going to go ahead and add is we're going to add the word border, we're gonna add the equals sign, we're going to add a quotation mark, we're going to put 1, and then we're going to add another quotation mark.
What we've done, is we've basically told the Internet browser that this table needs to have a border with a value of 1.
So let's save our work, let's go back to our browser, and let's take a look.
As you can see, whatever's inside of our table, now, is formatted with the border.
Pretty neat, but the next thing we need to do, then, is we need to convert our dates into table cells.
So, if we go back to our HTML editor.
Because we know we want the first set of numbers to show up underneath our days of the week, we then need to add a new table row making sure, of course, that we close out our table row tag.
In this case, since we don't want these to show up as table headings, we're simply going to add a basic table cell which is the td tag or table data.
Like our days of the week, we need seven table cells to represent our numbers.
So, we're going to go ahead and copy and paste or td tags.
Then, we're going to find the first series of numbers and we're going to start pasting them into our table cells.
Ok, once you've got your first series of numbers put inside your table cells, go ahead and save your file, go back to the Internet browser, refresh your page, and, as you can see, we now have numbers inside of our table.
All right, the last thing we need to do then is we need to add another table row so that the rest of our numbers show up inside of our table.
SO, go back to your HTML editor.
Start a new table row, make sure to close it, and then, once again, we're going to add our table data tags.
Making sure that we add seven of them, so that our table rows have an equal amount of content in them.
And, like before, we're simply going to cut and paste our numbers into our table cells.
Once you've got all the numbers inside their own table cell, go ahead and save your file.
Go back to your Internet browser, refresh your page, and, as you can see, all of our data is now in a table.
The days of the week show up as headers in their own table row.
The first numbers, 1 through 7, show up in their own table row, and the second set of numbers, 8 through 14, show up in their own table row.
In the next tutorial, I will be talking more about attributes.
For now, however, just remember that whenever you're building a table in HTML you need to remember to always include the table row and the table cell tags in order for your table to display correctly.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.