Using Tables

Created by Nick Merrigan
First
off we need to think of a

good project to use tables in.
Lets create a calendar.
Pick a month to create using HTML.
Once you have the month you want
to create, think of things we can
use to fill in the calendar.
Think of birthdays, events, holidays,

and anything else you want.
Lets start off by creating the calendar.

Open notepad and create a new HTML
document called calendar.html.
Start the calendar code
<html>
<head>
<title>2013 Calendar </title>
</head>
<body>
</body>
</html>
In between the body tags, lets

create the days.
<body>
<h1>January</h1>
<p>30 31 1 2 3 4 5 </br>
6 7 8 9 10 11 12 </br>
13 14 15 16 17 18 19 </br>
20 21 22 23 24 25 26 </br>
27 28 29 30 31 1 2 </p>
</body>
Preview
your page. You will

notice that you have something
that is starting to look like a
calendar.
If you look at the calendar, you
can see that in the middle, it
goes further to the right. A
table would help us line all the
numbers up. Lets look at how to
create that table.
The table code we need is <table>, <tr>,

<th>, and <td> tags.
<table>- the table tag is used when you

want to start a table. This code is like
the ul or ol tag. You only need this code
at the beginning and the end of the table.
<tr>- the tr tag is placed when you need
another row in your table.
<th>- the th tag is placed when you are
using a header in your table.
<td>- the td tag is used when placing data
into a table.
Lets add the table code into our calendar.
<body>
<table>
<tr>
<h1>January</h1>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
Save
your project and view it now.

Now you can see that everything is
lining up. Its a little
different but as you will be able
to see, it will make a big
difference in the end.
Lets start adding information into the

calendar.
Add something for every day in the
calendar. You can have 5 days a week be
work 9-5 if you had a full time job or
you can just make up whatever you want.
Add a br tag after the number and type
in your event.
In the last week, choose a day to have
errands.
Look at the next slide, you page should
look something like this.
Go to the beginning of the table and add

Sunday through Saturday using the th tags.
</tr>
<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
Now
that you have the calendar

made, lets create that day for
errands. In the day that you
created errands, we are going to
create another table. This table
will have a th tag and all the
other tags needed for a table.
<td>30</br>
<table>
<tr>
<th>Errands</th
>
</tr>
<tr>
<td>Pay
Rent</td>
</tr>
<tr>
<td>Start Packing</td>
</tr>
<tr>
<td>Homework</td>
</tr>
<tr>
<td>Go Shopping</td>
</tr>
</table>
</td>
<td>31</br>Work 11-7</td>
Now
that we have all the

information in the table, its
time to style.
Here we will give the Calendar a
background color, and have all of
the table a certain width. We can
also have the table rows and
columns a certain height and width
as well.
Go below the title tag and add the

style tag.
Lets start off by creating a background
color for the body, and a background
color for the table.
<style type =text/css>

body{
background: rgb(100, 100, 100);
}
Table{
}
Youll notice how January is not

considered to be in the table. We
can fix this by adding a tag around
the h1.
<td><h1>January</h1></td>
This will tell the code that the
heading is part of the table. Save
your calendar and preview it again.
You will see that January is now the
correct color.
Lets add a little more CSS now.
body{
background:rgb(0, 100, 180);
}
table{
border: gray 6px outset;
}
th{
text-decoration: underline;
border:thin solid;
padding: 5px;
}
td{
width: 100px;
}
As
you can see, some of dates

dont look aligned to the others.
We will solve this problem with
vertical align and text align.
You can see whatever we added to
the table properties, they were
added to the table inside the
table as well. Lets see if we can
remedy that as well.
td{
width:
100px;
border-top: thin dotted black;
border-right: thin dotted black;
text-align: center;
vertical-align: top;
}
Lets
change the numbers in the

calendar to be bold and white in
color. Lets create a span for the
numbers that are in January and a
span for the numbers that go into
a different month.
<span class = days>
<span class = december>
Add the spans to the CSS to make the numbers bold and white.
Make the font size just a little smaller than all the other
font in the table as well.
.days{
font-weight:bold;
color: white;
font-size:12px;
text-align: center;
}
.december{
font-weight:bold;
color: red;
font-size:12px;
text-align:left;
}
Lets add a class for the heading January.

This will allow the heading not to have a
border. Lets also get January in the center
of the table by adding the td tags to the
left and the right of January. January
should be in the 4th td.
.heading{
border:none;
}
After you have done that, preview your page.
Your page should have January now in the
center of the table with no border around
it.
Now that we have everything the way we want it,

lets make the table inside day 30 look better. To
alter the CSS for that table, all we need to do is
type this code:
table table{
border:none;
}
table table th{
border:none;
}
table table td{
text-align: left;
border:none;
}
Lets take out the text align on the td tag so

everything is left aligned. Lets also change the
font to script to give a more hand written look
for the things inside the calendar. Change the
font size to 25px as well.
Create a height for the td tags of 125px and
change the width to 125 as well. In the table
table td tag make a height of 12px. Make the font
size in the table table td tag to 12px as well.
Add a left margin of 125px in the table section of
the css and add a 50px top margin as well. Make
sure and change your margins in the table table to
0px.
Add a 5px padding to the td tag to get that text
away from the border.
Now
that you have your calendar

finished, add some of your own
touches. Add some pictures and
maybe even a background image.
Have fun with it.
Throughout
this presentation you

have learned how to create a
table. In this table you have
learned to create another table.
You now know how to alter the CSS
for this table as well.

Using Tables

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Using Tables

Transféré par

Droits d'auteur :

Formats disponibles

Created by Nick Merrigan

off we need to think of a

Think of birthdays, events, holidays,

Lets start off by creating the calendar.

In between the body tags, lets

your page. You will

The table code we need is <table>, <tr>,

<table>- the table tag is used when you

Lets add the table code into our calendar.

your project and view it now.

Lets start adding information into the

Go to the beginning of the table and add

that you have the calendar

that we have all the

Go below the title tag and add the

<style type =text/css>

Youll notice how January is not

Lets add a little more CSS now.

you can see, some of dates

change the numbers in the

Lets add a class for the heading January.

Now that we have everything the way we want it,

Lets take out the text align on the td tag so

that you have your calendar

this presentation you

Vous aimerez peut-être aussi