Checkerboard Table Exercise
Table Tags:
<TABLE>
<TR> </TR> Table Row-add a new line.
<TR> <TD> </TD> Table Data-how to add information, and/or a new column.
</TR> </TABLE>
Make a checkerboard using table tags.
Instructions:
- First start a new html page using the basic formula from the first day. Open and close your html using the standard html tags. Remember to save as a "checkerboard.html"
- Within the <BODY> tags of your html document, start your table with <TABLE> tag to open and close your table with </TABLE> .
- Each time you add a new line you type in <TBODY> <TR> table row.
- Each time you add some info into a column, put <TD>table data </TD>around it.
- Then you put a </TR>at the end of the row.
- If you want to add another row, add another <TR> and end with </TR>.
- You will need to set the width and height of each cell within each TD tag, type WIDTH ="150" HEIGHT="150. and don't forget the ""s
- To add colour to your table cells, it also goes within the TD tag td bgcolor="#FFFF00".
Tables are great, because you can align things on your page without having to have everything in the center of your page. Without tables, you can't put things next to each other (cascading style sheets will replace tables when everyone decides to upgrade their browsers, the older browsers still can't read CSS so most people still use tables).
<TABLE>
<TR>
<TD>Cell 1 </ TD>
<TD>Cell 2 </ TD>
</TR>
</TABLE>
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
Adding a border to tables
Cell 1
Cell 2
Cell 3
Cell 4
|
|
Adding color to tables
Cell 1
Cell 2
Cell 3
Cell 4
|
|
Cell 1
Cell 2
Cell 3
Cell 4
|
|
How do I get
rid of the border? Just add the tag border="0" to your table tag:
Cell 1
Cell 2
Cell 3
Cell 4
|
|
row 1
 rows
1-3
row 1
row 1
row 2
rows
2-3
row 2
row 3
row 3
|
|
Crazy Colours
cell 1
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7
cell 8
|
|
||||||||||||
Setting widths in tables? Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance
Cell 1
Cell 2
|
|
Adding a background to the table. It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add "background="yourbackground.gif." Like this:
yourbackground.gif
A background will fill your whole table.
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
Just need a background in one or more cells of your table? Add the background to the individual cell like this:
Cell 1
|
Cell 2
|
Cell 3
|
Cell 4
|
How do I frame
an image with a table border? Framing an image is very easy. Just enclose
your image in a simple table with a border. You can choose any color
you like, and any size border width. Just change the information you see in
bold text to your own information:
5
"
bordercolor="9966ff"
cellpadding="0" cellspacing="0">5
.gif" width="50" height="50" alt="bird">
 |
If you need a double border, try this:
5
5
.gif" width="50" height="50" alt="bird">
|
HTML Exercise~ Checkerboard Table |
Make a table with five rows and five columns. Add
a colour to every other cell. Then put a different colour in the blank cells.
You will have to set table widths to see the colours. And finally I want you
to put an image into the center square (make sure it is saved as a “jpg”).
Your final result should look like a checkerboard with a picture directly in
the center.
|
Table HTML Vocabulary
- Table The table
tag looks like this:
. All of your table information goes between these two tags to make up a table. All tables start with the tag and end with the
tag.
- Table Row An individual row that contains at least one data cell. On this page I've used two data cells. The tag looks like this: .
- Table Data An
individual cell in a table row. The tag looks like this:
. The table, table row, and table data tags always
nest like this:
Here is an example of a table with rows and cells:
No comments:
Post a Comment