ࡱ> []Z7 >$bjbjUU .R7|7|Wl8F,rt*j:,"NNN)))W*Y*Y*Y*Y*Y*Y*$B, b.R}*)))))}*+NN*+++)FNNW*+)W*++'#:C(,(N sB&oo( (*0*y(R. .(+ Learning Outcomes Using notepad to write a HTML page Creating Tables in HTML Understanding the colspan and rowspan attribute Specifying Cell spacing Adding colour to table cells Tables The beauty of tables is that they're flexible. You can make them spread out, and take up the whole page (no matter how wide the user makes it). Or you can make them rigid, and force the page into a certain shape. The choice is yours. You're in control. But today we're starting with the basics. Cans and cants The first step to understanding tables is knowing what shapes you can make with them. Start with a grid:  INCLUDEPICTURE "http://hotwired.lycos.com/webmonkey/96/47/stuff/table1.gif" \* MERGEFORMATINET  That's doable in a table. You can also begin to remove lines:  INCLUDEPICTURE "http://hotwired.lycos.com/webmonkey/96/47/stuff/table2.gif" \* MERGEFORMATINET  The grids above are also doable. But this below is not:  INCLUDEPICTURE "http://hotwired.lycos.com/webmonkey/96/47/stuff/table3.gif" \* MERGEFORMATINET  Basically, if you can draw it in a grid, and it's not shaped like an L, you can put it in a table. And if you understand what you can and can't do right from the beginning, you'll save yourself lots of hassle in the long run. The basics There are three basic units in any table: the table, the table row, and the table cell. The tags for these are: Table: Table row: Table cell: , which is always enclosed in a
(An aside: Why is the tag for a table cell ? Well, there are two schools of thought on the matter. Some say it stands for "table data," and some say the Netscape engineers were high on drugs.) The thing to remember here is that a is always enclosed in a
. Enough already. Let's do it! OK. Let's make the basic table we outlined above. Here it is: Cell 1Cell 2Cell 3Cell 4And here's the code:
Cell 1 Cell 2
Cell 3 Cell 4
As you can see, the first table row encloses cells 1 and 2; the second table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are sandwiched between the and tags. In order to see the table, I added border to the table tag. This simply turns the border on. You can also specify its width by adding a number, as in . But be warned, this can be taken Exercise 1: * Make sure you create a folder called week 6, create a folder called exercise 1. Using Notepad create a basic HTML page using the example showed in week 1. Create the basic table as defined above. "Colspan" and "rowspan" You can also make a cell in one row stretch across two cells in another. Like this: Cell 1Cell 3Cell 4To accomplish this, you have to use the colspan modifyer. Just add colspan=2 to the aligns everything you put in all the cells of that row to the right.
, and voil!
Cell 1
Cell 3 Cell 4
You can also do this: Cell 1Cell 2Cell 3Just add rowspan=2 to the 		, like so:
Cell 1 Cell 2
Cell 3
Just remember: Rows run horizontally, columns run vertically. So if you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan. Exercise 2: * Make sure you create a folder called week 6, create a folder called exercise 2. Using Notepad create a basic HTML page using the example showed in week 1. Create the two tables shown above using colspan and rowspan tags. Experiment with how they work. Using the align tag to position tables You're already familiar with the align tag. It's an old friend. You put it in and

tags. But you can also use it in a table anywhere. Let's take a look:

aligns anything you put in that cell (text, images, etc.) to the right.
aligns the whole table to the right and flows text around it - it works just like aligning an image. But be warned: Aligning whole tables only works in Netscape 3.0 and Explorer 2.0+. The values for aligning an entire table are: align=right pushes everything against the right side. align=left pushes everything against the left side. (This is the default setting, so you probably won't ever need it.) align=center centers everything in the middle. But wait, there's more! We can also line stuff up vertically, pushing it toward the top, bottom, or middle of the cells. We do this with valign: aligns anything you put in all the cells of that row with the top. The values for vertical alignment are: valign=top pushes everything to the top of the cell. valign=bottom pushes everything to the bottom of the cell. valign=middle centers everything in the middle vertically. (This is the default, so you probably won't ever need to do it.) (An aside: Why do we align=center but valign=middle? Well, actually, you can use either term in either situation, but this is the way they're listed in Netscape's Exercise 3: * Make sure you create a folder called week 6, create a folder called exercise 3. Using Notepad create a basic HTML page using the example showed in week 1. Create a table/s with dimensions of your choice, experiment with the align tags. Cell Spacing You may want to adjust the spacing of the cells. Here are two tags that do really similar things that you'll probably mix up a lot: cellspacing and cellpadding. They both put a little space between the cells of your table, but they do it in different ways. cellspacing makes the border of the table fatter, increasing the distance between cells. cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides. cellspacing=10 1 2 3 4 cellpadding=10 1 2 3 4 Both attributes go in the
aligns anything you put in that cell (text, images, etc.) at the top.
tag, like so:
If you're planning on leaving the table borders off, it really doesn't matter which you use. But if you're going to leave the borders on (or add colour to your table cells) the difference between the two tags will become very important. Just remember: cellspacing increases the size of the border, and cellpadding increases the space around the border Exercise 4: * Make sure you create a folder called week 6, create a folder called exercise 4. Using Notepad create a basic HTML page using the example showed in week 1. Create a table/s with dimensions of your choice, experiment using cellspacing and cellpadding. Try different values so you can understand how they work. Adding colour to table cells Simply use the below code snippet, adding to the tr tag Exercise 5: * Make sure you create a folder called week 6, create a folder called exercise 5. Using Notepad create a basic HTML page using the example showed in week 1. Create a table with different colours in each cell. Use hexadecimal values. (hex values for colours can be found on my website). Tips and tricks Here are some tips and tricks that might be useful: If you don't specify cellpadding and cellspacing, they default to the number 2. So if you really want your cell contents to get close and personal, be sure to specify cellpadding=0 and cellspacing=0. For more control, put nowrap in your table cell, like so:
. This means that no text in that cell will wrap, unless you manually break it with the
tag. To make a table take up the entire page  no matter how big the user makes it  set the width and height at 100%, like so: (warning: height=100% only works in Netscape). You can use % values to control the table size in a web browser. HTML Basics Week 6 Unit 208 Website Design PAGE  PAGE 1 Deepak Gautam cdhijk j q r y z { 2 8 9 ? @ A G H N O P µ¨CJaJ0J B*phj'CJOJQJUaJjCJOJQJUaJjCJOJQJUaJ5CJOJQJ\aJ6CJOJQJ]aJCJOJQJaJ>*5CJOJQJ\^JaJ=7Pcl j r z $If $$Ifa$#=$z { f 2 9 @ HL$If $$Ifa$H$$If0 634a @ A H O P f u v <|||||||||^$Ifu$$If0A0634abP f     E K JK-345;<BCDlsLcijpqrsyz{GVϻ6CJOJQJ]aJCJaJ B*ph >*B*CJOJQJ^JaJph&5>*B*CJOJQJ\^JaJph5CJOJQJ\aJ5CJOJQJ\^JaJCJOJQJ^JaJ0JCJOJQJaJ:      " JK-4$If^45<CD<$u$$If0A0634ab$If`$$If0634abD67BCLcjq$If^qrsz$$Ifv$$If40A0634abz{  ^v$$If40A0634ab12=>GLM#"yFt#S<*^^LM"#qv{~"2PSfiyt#/<K}*7JKWLX[׸̸6CJOJQJ]aJ0J&5>*B*CJOJQJ\^JaJphCJOJQJ^JaJ5CJOJQJ\^JaJ5CJOJQJ\aJCJOJQJaJ 0J5\BJKWFGHIKLY?ORU$IfK$ $$Ifa$[f?MQRTUVXY[\]^lpqstuwxz{|}~)/;GO P !,!x!!!! """)"B"H"f"&5>*B*CJOJQJ\^JaJphCJOJQJ^JaJ5CJOJQJ\^JaJ6CJOJQJ]aJ5CJOJQJ\aJCJaJ B*ph5\CJOJQJaJ0J?UVY\]^nqtwllwcc[[$IfK$ $$Ifa$ $$IfK$a$$K$L$IfT02 063K4abtux{|}wllwc $$Ifa$ $$IfK$a$$K$L$IfT0 0634ab}~;G^J$$IfT0634aO !!.!c!,""####$$$ $!$,$;$<$=$>$&`#$ & Fdd[$\$ & Ff"q"""O#q#|####$$$$$$!$"$($)$*$+$,$>$0JmHnHu0J j0JUmH sH CJOJQJaJ0J,1h. A!"#$% DdD  S Avhttp://hotwired.lycos.com/webmonkey/96/47/stuff/table1.gifbu*\J@J Heading 3$@&5>*CJOJQJ\^JaJF@F Heading 4$@&5CJOJQJ\^JaJ<A@< Default Paragraph FontD^@D Normal (Web)dd[$\$ B*phFg@F HTML TypewriterCJOJPJQJ^JaJ.U@. Hyperlink >*B*phf3e@" HTML Preformatted7 2( Px 4 #\'*.25@9!B*CJOJPJQJ^JaJph, @2, Footer  9r &)@A& Page Number,@R, Header  9r >V@a> FollowedHyperlink >*B* ph> R7Pcl jrz{f29@AHOPfuv" J K - 4 5 < C D    6 7 B C L c j q r s z {   1 2 = > G LM#"yFt#S<*JKWFGHIKLY?ORUVY\]^nqtux{|}~;GO.c, ! , ; ? 000000000800000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 0 0 0000@0@0@0@0 00;VVVYP [f">$!#(z @ 4DqzUt}>$ "$%&'=$chj> CTCTCT07;BDY!!t8@0(  B S  ?binu|~   l s t | > @    9 ; ru#%)/07=?@F*08?[f?J^i '27Bx 'BHjp3 9 < ?  *sxgl|~    ' ) > @    " $ 9 ; #%zty#(=?*0[f?J^i ]a< ? 333333333333333333333333333333333333333333333333333337NP $ % "#JKEGGKNO  ! + , : ? DGI:\dgnew\u208\week4.docDGfC:\Documents and Settings\Administrator\Application Data\Microsoft\Word\AutoRecovery save of week4.asdDGI:\dgnew\u208\week6.docDGfC:\Documents and Settings\Administrator\Application Data\Microsoft\Word\AutoRecovery save of week6.asdDGI:\dgnew\u208\week6.docDGI:\dgnew\u208\week6.docDGI:\dgnew\u208\week6.docDGfC:\Documents and Settings\Administrator\Application Data\Microsoft\Word\AutoRecovery save of week6.asdDGI:\dgnew\u208\week6.docDGI:\dgnew\u208\week6.doc[O (J&" ^`OJPJQJ^Jo( ^`OJQJo(o pp^p`OJQJo( @ @ ^@ `OJQJo( ^`OJQJo(o ^`OJQJo( ^`OJQJo( ^`OJQJo(o PP^P`OJQJo(^`CJOJQJo(^`CJOJQJo(opp^p`CJOJQJo(@ @ ^@ `CJOJQJo(^`CJOJQJo(^`CJOJQJo(^`CJOJQJo(^`CJOJQJo(PP^P`CJOJQJo([O J&"z|        j,2ޜ:L|v[G21N>jrz{29@AHOP- 4 5 < C D c j q r s z { ?ORUVY\]^nqtux{|}~? @t> `@UnknownGz Times New Roman5Symbol3& z Arial7&  Verdana?5 z Courier New;Wingdings"qhy׳zf!1M 8!20dL 2QThe HTML Basics DGDGOh+'0p  , 8 DPX`hThe HTML Basics dhe DG G G  Normal.dotsDGm33mMicrosoft Word 9.0@f*@hԅ@M՜.+,D՜.+,D hp   Alienwaret8 L  The HTML Basics TitleP 8@ _PID_HLINKSAhl;http://hotwired.lycos.com/webmonkey/96/47/stuff/table1.gifhoi;http://hotwired.lycos.com/webmonkey/96/47/stuff/table2.gifhn;http://hotwired.lycos.com/webmonkey/96/47/stuff/table3.gif  !"#$%&'()+,-./013456789:;<=>?@ABCDEFGHIKLMNOPQSTUVWXY\Root Entry FL^Data *1Table2.WordDocument.RSummaryInformation(JDocumentSummaryInformation8RCompObjjObjectPoolLL  FMicrosoft Word Document MSWordDocWord.Document.89q