In this lecture we're gonna be creating tables using HMO when it comes to building web pages.
It's very important to have a solid understanding of table structures.
Tables allow us to organize data and content in an organized way table data is structured in the form
of rows and columns the intersection of a row with the column forms a table so the individual cells
contain the actual data.
Data can be in the form of text images or even video content
this example illustrates the structure of a basic table used to record the findings of a survey that
asked respondents to list their favorite sport.
Here we have a table with two columns in nine rows which gives us 18 individual cells let's start off
by creating this table in a standard HMO five document
for this you'll need to open your text editor and we'll also need to set up the basic HDL page structure
as we learned in earlier lessons.
Once you have the basic HMO page structure created go ahead and save your file you were on your computer.
Can Save the file as tables dot HDMI.
Sure to put the HDMI extension at the end
by now this should all look familiar and as you probably guessed the code block for our table will be
inserted between the body the open and closed body type.
We'll begin by adding Our t or our open enclose table tags
the table tag also has several attributes.
First we can specify the width of the table.
For now we'll put the width as 100 percent
will come back to the width attribute.
Once we have our table created because there are different ways the width can be stated
next we can set a border for our table.
Let's set the border to one pixel
and you can increase his value for a thicker border.
Or you could put you can put zero or no border we can also put a border color attribute
and we'll set that to blue.
Next we can specify the cell spacing and Cell padding attributes
this illustration provides a visual illustration of what each of these mean the Cell padding will define
the amount of space around the cell contents the cell spacing on the other hand will determine the amount
of space between each cell in your table
and the unit of measurement for cell spacing in Cell padding is also a pixel
once we've defined these attributes.
We can start adding rows and columns each row is defined by an open and close t RTA for table row
so I'll create one row to begin with
and inside each row I can create any number of columns
so our table had two columns and a column is represented by the open and close TDA.
You can insert your content inside the open enclosed EDTA
so the first part of our table was the headings
so that's that's the that's what the first row would look like.
I will insert the second row
and again each row had two columns to enter some some data inside these columns
made a mistake there.
So remember the first column was the sport and we'll put the sport label in in each of the first columns
and then the response in each of the second columns.
I'm just copying and pasting
them just changing the sport labels
also the data
and there it is.
That's all the rows and columns for this particular table with the table created let's save this file
and preview it in our web browser.
See the final result.
And that's what the table looks like
one thing you may have noticed is the table is the full width of the browser's content area.
And this is because we specified a table with 100 percent you'll notice that if we change the size of
the browser window
that the table expands and contracts
and always maintains 100 percent of the browser window.
Now let's see what would happen if I change the width to 50 percent so go go back to the source code
just change the width to 50 percent
and then refresh the page.
Now we can see that the table always maintains 50 percent the browsers content area
is what the percentage based with the table will always expand and contract to maintain that percentage
the specified percentage of the browsers content area
but what if we wanted the table to be a fixed with.
So it doesn't expand or contract with the browser window for that we would need to change the with from
a percentage to a fixed value so let's go ahead and change from 50 percent to 500.
Now if you don't specify a percentage that converts the table with into a pixel based table with so
500 pixels will be the new width of this table we're going to save the file and I'm just going to reload
the web browser
and now you'll notice that no matter how big or small the browser window is the table always stays at
500 pixels.