Colors:
← Older revision
Revision as of 20:46, 21 December 2013
(6 intermediate revisions by one user not shown)
Line 182:
Line 182:
===Borders on Cells===
===Borders on Cells===
−
Well what about the
rows
and cells? For cells we place a '''border''' around them
.
+
We can put borders around cells but not
rows.
−
*To put borders around the cells, you have to put the border attribute into each of the beginning <b><nowiki><td></nowiki></b> tags, just you did for the table border.
+
*To put borders around the cells, you have to put the border attribute into each of the beginning <b><nowiki><td></nowiki></b> tags, just
as
you did for the table border.
−
*
''(
The
<b>
<nowiki><
tr
></nowiki>
</b> tags do not take borders.)
''
+
*The
border coding for a cell
<nowiki><
td
></nowiki>
will be:
−
*The coding for a cell will be
<nowiki><td
</nowiki> '''
style=”border:1px solid black
;”'''<nowiki>
></nowiki>
.
+
::'
''<nowiki><td style=”border:1px solid black
"
></nowiki>
'''
−
*
So put the border
attribute into each of the beginning <b><nowiki><td></nowiki></b> tags.
What
do you see?
Now
Each cell has a border or is in a box.
+
*
Install this
attribute into each of the beginning <b><nowiki><td></nowiki></b> tags.
+
*Save and what
do you see? Each cell has a border or is in a box.
<table style=”border:1px solid black;”>
<table style=”border:1px solid black;”>
Line 223:
Line 224:
</div>
</div>
−
===
Make
Table
Larger
===
+
===
Enlarge
Table ===
====Width attribute====
====Width attribute====
Line 229:
Line 230:
*To widened to table, we use the '''width''' attribute in the table tag.
*To widened to table, we use the '''width''' attribute in the table tag.
*We can give it an exact width in pixels or in percentages.
*We can give it an exact width in pixels or in percentages.
−
*To make the table go all the way across the page, type the property:value '''width:100%''' in the beginning table tag.
+
*To make the table go all the way across the page, type
for
the property:value
:
'''width:100%''' in the beginning table tag.
−
*The two attributes in the table tag will look like this:
<b>
<nowiki><table style=”border:1px solid black; width:100%;”></nowiki>
</b>.
+
*The two attributes in the table tag will look like this:
−
*Notice the
;
between the attributes. All attributes have to be separated by semi-colons.
+
::'''
<nowiki><table style=”border:1px solid black; width:100%;”></nowiki>
'''
+
*Notice the
semi-colon
between the attributes. All attributes have to be separated by semi-colons.
*The order of attributes does not matter as long as they are separated by semi-colons.
*The order of attributes does not matter as long as they are separated by semi-colons.
*Here's our expanded table:
*Here's our expanded table:
Line 253:
Line 255:
====Height attribute====
====Height attribute====
−
*To control the height of the table use the height attribute: '''height:100px'''. The table tag with the addition of the height attribute looks like: <nowiki><table style=”border:1px solid black; width:100%;
</nowiki> '''
height:
100px''' <nowiki>;”
></nowiki>
.
+
*To control the height of the table use the height attribute: '''height:100px'''. The table tag with the addition of the height attribute looks like:
−
*Percentage on height attributes do not work. You have to use an amount like in pixels.
+
::'''
<nowiki><table style=”border:1px solid black; width:100%; height:
100px”
></nowiki>
'''
+
*
''
Percentage on height attributes do not work. You have to use an amount like in pixels
''
.
+
*Here's our table so far:
<table style="border:1px solid black; width:100%; height:100px;">
<table style="border:1px solid black; width:100%; height:100px;">
<tr>
<tr>
Line 271:
Line 275:
</table>
</table>
*Now the table is a 100 pixels high and takes up 100% of the page width.
*Now the table is a 100 pixels high and takes up 100% of the page width.
+
===Colors===
===Colors===
[[File:Html1.gif|thumb|200px]]
[[File:Html1.gif|thumb|200px]]
Line 277:
Line 282:
*'''Named Colors''' - To pick a HTML color see: [http://www.w3schools.com/html/html_colornames.asp HTML colors]
*'''Named Colors''' - To pick a HTML color see: [http://www.w3schools.com/html/html_colornames.asp HTML colors]
*'''HEX color codes''' - You will notice on the list of colors a HEX code. Most folks use the HEX code rather than the name of the color as it often shorter. If you click on "Shades" you can see an even larger selection of colors, but without out names.
*'''HEX color codes''' - You will notice on the list of colors a HEX code. Most folks use the HEX code rather than the name of the color as it often shorter. If you click on "Shades" you can see an even larger selection of colors, but without out names.
−
*The coding is a combination of numbers and letters
after a '''#'''
sign. Example: Orange is '''#ff9900'''.
You have to include
the '''#''' sign.
+
*The
HEX
coding is a combination of numbers and letters
. To use these color codes you have to put the pound
sign
before the color code
. Example: Orange is '''#ff9900'''.
No color will show if you leave off
the '''#''' sign.
*There are about 256 named colors.
*There are about 256 named colors.
*'''RGB colors''' - If a selection of 256 colors is not enough for you, you can get 16,000,000 colors in the RGB system. For example: green is '''rgb(000,255,000)'''. To see some of the 16,000,000 colors (not all of them!) in the RGB system, go to: [http://www.tayloredmktg.com/rgb/ http://www.tayloredmktg.com/rgb/]
*'''RGB colors''' - If a selection of 256 colors is not enough for you, you can get 16,000,000 colors in the RGB system. For example: green is '''rgb(000,255,000)'''. To see some of the 16,000,000 colors (not all of them!) in the RGB system, go to: [http://www.tayloredmktg.com/rgb/ http://www.tayloredmktg.com/rgb/]
Line 284:
Line 289:
*You can use either, name of color, the HEX system or the RGB system.
*You can use either, name of color, the HEX system or the RGB system.
−
Lets
see our table with
the
borders a
blue
color
using the HEX
system of
colors:
+
Lets
change
the
black border to
blue using the HEX
values for
colors:
<table style="border:1px solid #0000ff; width:100%; height:100px">
<table style="border:1px solid #0000ff; width:100%; height:100px">