Problem Two:
← Older revision
Revision as of 17:19, 28 December 2013
(7 intermediate revisions by one user not shown)
Line 439:
Line 439:
----
----
−
===Enlarge Table ===
+
===Width ===
−
+
−
=
===Width
attribute=
===
+
Our little table is looking more like a table, but it's not very big. How about making it larger?
Our little table is looking more like a table, but it's not very big. How about making it larger?
*To widened to table, we use the <font color="red">width</font> attribute in the table tag.
*To widened to table, we use the <font color="red">width</font> attribute in the table tag.
Line 487:
Line 485:
*Now table spans the page. Again, you can use other percentages or you can state an exact number in pixels like 300px.
*Now table spans the page. Again, you can use other percentages or you can state an exact number in pixels like 300px.
−
=
===Height
attribute=
===
+
===Height===
*Normally the height of a table is controlled by what data is in the cells and you don't have to do anything.
*Normally the height of a table is controlled by what data is in the cells and you don't have to do anything.
*If, however, you want to control the height of the table use the height attribute: <font color="red">height:100px</font>. The table tag with the addition of the height attribute looks like:
*If, however, you want to control the height of the table use the height attribute: <font color="red">height:100px</font>. The table tag with the addition of the height attribute looks like:
Line 533:
Line 531:
----
----
−
===
Border
Colors===
+
===Colors===
[[File:Html1.gif|thumb|200px]]
[[File:Html1.gif|thumb|200px]]
The color of the borders of our table is black. How about some other color?
The color of the borders of our table is black. How about some other color?
Line 679:
Line 677:
'''Note''': Using the rgb color coding requires more typing. The HEX system with its 256 colors is probably sufficient for your needs in the wiki.
'''Note''': Using the rgb color coding requires more typing. The HEX system with its 256 colors is probably sufficient for your needs in the wiki.
−
===
Position of
Text
in a CELL
===
+
===Text
-align
===
*Where are the letters in the cells?
*Where are the letters in the cells?
*They are in the upper left hand corner in each of the cells.
*They are in the upper left hand corner in each of the cells.
*That is the default position of text in cells.
*That is the default position of text in cells.
−
*
And in case you did not figure it out the
default color for text is black.
+
*
The
default color for text is black.
−
====Text-align====
*To change '''horizontal location''', ''not the vertical position'', of text in a cell use the <font color="red">text-align</font> attribute.
*To change '''horizontal location''', ''not the vertical position'', of text in a cell use the <font color="red">text-align</font> attribute.
*You have three positions to chose from: <font color="red">left, center</font> and <font color="red">right</font>. The attributes with their properties and values look like this: <font color="red">text-align:left</font>, or <font color="red">text-align:center</font>, or <font color="red">text-align:right</font>.
*You have three positions to chose from: <font color="red">left, center</font> and <font color="red">right</font>. The attributes with their properties and values look like this: <font color="red">text-align:left</font>, or <font color="red">text-align:center</font>, or <font color="red">text-align:right</font>.
Line 726:
Line 723:
</table>
</table>
−
=
===Vertical-align
=
===
+
===Vertical-align===
*If we want the text to be at the bottom of the cell, we use the <font color="red">vertical-align</font> attribute. You have three choices: <font color="red">top, middle</font> and <font color="red">bottom</font>.
*If we want the text to be at the bottom of the cell, we use the <font color="red">vertical-align</font> attribute. You have three choices: <font color="red">top, middle</font> and <font color="red">bottom</font>.
*Put the letters on the second row on the bottom and on the right side of each cell. And lets make the letters blue for practice. The coding will be in each cell on the bottom row:
*Put the letters on the second row on the bottom and on the right side of each cell. And lets make the letters blue for practice. The coding will be in each cell on the bottom row:
Line 800:
Line 797:
*Put the position of the words in the middle row of the table to the '''bottom and left side''' of each cell.
*Put the position of the words in the middle row of the table to the '''bottom and left side''' of each cell.
*Put the position of the words on the bottom row of the table to the '''middle and center''' of each cell.
*Put the position of the words on the bottom row of the table to the '''middle and center''' of each cell.
+
Click [[User:Ccsmith/sandbox/HTMLanswers#Here is the answer to the homework problem One:|Here]] to see if you got problem one correct.
====Problem Two====
====Problem Two====
Line 843:
Line 841:
<nowiki></table></nowiki>'''
<nowiki></table></nowiki>'''
</div>
</div>
−
*
you
see that each '''row''' has Fruits, Vegetables, Nuts and Grains in them, not just fruits for example.
+
*
You
see that each '''row''' has Fruits, Vegetables, Nuts and Grains in them, not just fruits for example.
*In the next row, be sure the order of the classifications of foods are in the same order as in the first row. Otherwise the columns will have different foods in them.
*In the next row, be sure the order of the classifications of foods are in the same order as in the first row. Otherwise the columns will have different foods in them.
*This assignment will be our bases for the next lesson as we continue with learning about tables.
*This assignment will be our bases for the next lesson as we continue with learning about tables.
+
+
Click [[User:Ccsmith/sandbox/HTMLanswers#Here is the answer to the homework problem Two:|Here]] to see if you got problem two correct.
----
----
===[[user:ccsmith/sandbox/html2|Go to Lesson 2]]===
===[[user:ccsmith/sandbox/html2|Go to Lesson 2]]===
<references>
<references>