Taulukoiden käyttö HTML-kielessä


1. TYHJÄ HTML SIVUPOHJA 10. MONIOSAINEN OTSIKOINTI
2. TAULUKON PERUSELEMENTIT 11. KOKO TAULUKON OTSIKKO
3. PIENI ESIMERKKITAULUKKO 12. ELEMENTIN VAAKATASAUS SOLUSSA
4. KEHYKSET LISÄTTYNÄ TAULUKKOON 13. ELEMENTIN PYSTYTASAUS SOLUSSA
5. KEHYKSEN LEVEYDEN MUUTTAMINEN 14. KUVAN LISÄÄMINEN TAULUKKOON
6. SOLUVÄLIN SÄÄTÄMINEN 15. KEHYKSET JA SISÄKKÄISET TAULUKOT
7. TYHJÄN TILAA SOLUN SISÄÄN 16. KOLME TAULUKKOA YHDESSÄ (ESIM)
8. SOLUJEN YHDESTELY 17. POHJA SISÄKKÄISILLE TAULUKOILLE
9. OTSIKON TEKEMINEN SARAKKEELLE 18. ESIMERKKI POHJAN KÄYTÖSTÄ




Tyhjä sivupohja

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN" "html.dtd">
<HTML>
<HEAD>
<TITLE>Normal HTML Template</TITLE>
</HEAD>
<BODY>

Taulukko elementit sijoitetaan tähän

</BODY>
</HTML>

Siirry alkuun

Taulukon peruselementit HTML-kielessä

<TABLE>...</TABLE>Taulukkomäärittelyt näiden tagien sisälle
<TR>...</TR>Tämä tagipari määrittelee taulukon rivin
<TH>...</TH>Näillä tehdään taulukon otsikkosolut, joka näkyy selaimessa lihavoituna.
<TD>...</TD>Näiden tagien sisälle tulee soluun sijoitettava tieto

Siirry alkuun

Tämä koodi tuottaa pienen taulukon


<TABLE>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>

Edellinen taulukko näyttää selaimessa tältä:

SOLU 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Tämä koodi tuottaa kehystetyn taulukon

<TABLE BORDER>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>

Edellinen taulukko näyttää selaimessa tältä:

SOLU 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Tämä koodi tuottaa taulukon 5 pikselin kehyksellä


<TABLE BORDER=5>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>

Tulos taulukosta 5 pikselin kehyksellä

SOLU 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Tämä koodi tekee kehystetyn taulukon, solujen väliin 10 pikseliä tyhjää


<TABLE BORDER CELLSPACING=10>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>

Tässä taulukko, jossa solujen väliin jää 10 pikseliä tyhjää

SOLU 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Tämä koodi tekee 20 pikseliä tyhjää solun seinämän ja elementin väliin


<TABLE BORDER CELLPADDING=20>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>

SOLU 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Solujen yhdistely vaaka- ja pystysuunnassa


<TABLE BORDER>
<TR>
<TD COLSPAN=2>SOLU 1</TD>
<TD ROWSPAN=2>SOLU 2</TD>
<TD COLSPAN=2>SOLU A</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
<TD>SOLU 5</TD>SOLU 6</TD>
</TR>
</TABLE>

SOLU 1 SOLU 2 SOLU A
SOLU 3 SOLU 4 SOLU 5SOLU 6

Siirry alkuun

Esimerkki otsikon tekemisestä taulukkoon


<TABLE BORDER>
<TR>
<TH>Otsikko 1</TH> <TH>Otsikko 2</TH>
</TR>
<TR>
<TD>Info Solu</TD> <TD>Info Solu</TD>
</TR>
<TR>
<TD>Info Solu</TD> <TD>Info Solu</TD>
</TR>
</TABLE>

Otsikko 1 Otsikko 2
Info Solu Info Solu
Info Solu Info Solu

Siirry alkuun

Monitasoinen otsikointi käyttäen COLSPAN parametria


<TABLE BORDER>
<TR>
<TH COLSPAN=2>OTSIKKO 1</TH>
<TH COLSPAN=2>OTSIKKO 2</TH>
</TR>
<TR>
<TH>OTSIKKO 3</TH> <TH>OTSIKKO 4</TH>
<TH>OTSIKKO 5</TH> <TH>OTSIKKO 6</TH>
</TR>
<TR>
<TD>Tieto solu A</TD> <TD>Tieto solu B</TD>
<TD>Tieto solu C</TD> <TD>Tieto solu D</TD>
</TR>
<TR>
<TD>Tieto solu E</TD> <TD>Tieto solu F</TD>
<TD>Tieto solu G</TD> <TD>Tieto solu H</TD>
</TR>
</TABLE>

OTSIKKO 1 OTSIKKO 2
OTSIKKO 3 OTSIKKO 4 OTSIKKO 5 OTSIKKO 6
Tieto solu A Tieto solu B Tieto solu C Tieto solu D
Tieto solu E Tieto solu F Tieto solu G Tieto solu H

Siirry alkuun

Lisätään otsikko koko taulukolle sen alapuolelle CAPTION elementillä

Esimerkki näyttää myös tyhjän tilan jättämisen taulukon sisälle

<TABLE BORDER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Ote EU:n bensadirektiivistä</CAPTION>
<TR><TDCOLSPAN=2></TD>
<TH COLSPAN=2>2 tahti bensiini</TH></TD>
</TR>
<TR>
<TR><TD COLSPAN=2></TD>
<TH>M-sahaan</TH><TH>Mopoon</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Seos</TH><TH>Bensaa</TH>
<TD>95%</TD><TD>97%</TD>
</TR>
<TR>
<TH>Voiteluöljyä</TH><TD>5%
</TD><TD>3%</TD>
</TR>
</TD>
</TR>
</TABLE>
</TABLE>

Ote EU:n bensadirektiivistä
2 tahti bensiini
M-sahaanMopoon
SeosBensaa 95%97%
Voiteluöljyä5% 3%

Siirry alkuun

Esimerkkejä vaakatasauksesta soluissa

<TABLE BORDER>
<TR ALIGN=CENTER>
<TD>Solu 1<BR>
on keskitetty</TD>
<TD>Solu 2<BR>
on keskitetty</TD>
</TR>
<TR>
<TD>Solu 3<BR>
on oletuksena<BR>vasemm.
<TD ALIGN=RIGHT>Solu 4
<BR>tasattu oik. <BR>reunaan
</TR>
</TABLE>

Solu 1
on keskitetty		 Solu 2
on keskitetty
Solu 3
on oletuksena
vasemm.		 Solu 4
tasattu oik.
reunaan

Siirry alkuun

Esimerkki pystysunnan tasauksesta soluissa

<TABLE BORDER>
<TR ALIGN=CENTER>
<TD>Solu 1<BR> keskellä</TD>
<TD>Solu 2<BR>keskellä</TD>
<TD VALIGN=TOP>YLÖS</TD>
<TD VALIGN=TOP>YLÖS</TD>
</TR>
<TR>
<TD>Solu 3<BR> oletuksena<BR>vasemm.
<TD ALIGN=RIGHT>Solu 4
<BR>on oikealle <BR>tasattu</TD>
<TD VALIGN=MIDDLE>
KESKELLÄ</TD>
<TD VALIGN=BOTTOM>
ALHAALLA</TD>
</TR>
</TABLE>

Solu 1
keskellä		 Solu 2
keskellä		 YLÖS YLÖS
Solu 3
oletuksena
vasemm.		 Solu 4
on oikealle
tasattu		 KESKELLÄ ALHAALLA

Siirry alkuun

Kuvan lisääminen taulukkoon


<TABLE BORDER>
<TR>
<TD COLSPAN=2>Solu 1</TD>

<TD ROWSPAN=2 ALIGN=CENTER
WIDTH=40%>Katselee<BR>
<IMG SRC="eyes.gif"><BR>pitkään...</TD>

<TD COLSPAN=2>Solu A</TD>
</TR>
<TR>
<TD>Solu 3</TD> <TD>Solu 4</TD>
<TD>Solu 5</TD>Solu 6</TD>
</TR>
</TABLE>

Solu 1 Katselee

pitkään...		 Solu A
Solu 3 Solu 4 Solu 5Solu 6

Siirry alkuun

Kehyksen käyttö sisäkkäisissä taulukoissa


<TABLE BORDER =1>
<TR>
<font size=-1>
Rivi on pitkä ja kalpea...
Rivejä voi olla eri mittaisia
On myös mahdollista kirjoittaa
joka riville erilaista tekstiä
Rivi on pitkä ja kalpea...
Rivejä voi olla eri mittaisia
On myös mahdollista kirjoittaa
joka riville erilaista tekstiä
</font>
<TD>
<TABLE BORDER CELLSPACING=10>
<TR>
<TD>SOLU 1</TD> <TD>SOLU 2</TD>
</TR>
<TR>
<TD>SOLU 3</TD> <TD>SOLU 4</TD>
</TR>
</TABLE>
</TR>
</FONT>
</TABLE>

Rivi on pitkä ja kalpea...
Rivejä voi olla eri mittaisia
On myös mahdollista kirjoittaa
joka riville erilaista tekstiä
Rivi on pitkä ja kalpea...
Rivejä voi olla eri mittaisia
On myös mahdollista kirjoittaa
joka riville erilaista tekstiä
SOLUl 1 SOLU 2
SOLU 3 SOLU 4

Siirry alkuun

Kolme kehystettyä taulukkoa sivun keskellä, sisäkkäisinä taulukoina

.
<CENTER>
<TABLE>
<TR>
<TD>
<TABLE BORDER>
<CAPTION ALIGN=Bottom>Taulu 1</CAPTION>
<TR><TD>Solu 1</TD> <TD>Solu 2</TD>
</TR>
<TR>
<TD>Solu 3</TD> <TD>Solu 4</TD>
</TR>
</TABLE></TD>
<TD>
<TABLE BORDER>
<CAPTION ALIGN=Bottom>Taulu 2</CAPTION>
<TR><TD>Solu 1</TD><TD>Solu 2</TD>
</TR>
<TR>
<TD>Solu 3</TD> <TD>Solu 4</TD>
</TR>
</TABLE></TD>
<TD>
<TABLE BORDER>
<CAPTION ALIGN=Bottom>Taulu 3</CAPTION>
<TR><TD>Solu 1</TD> <TD>Solu 2</TD>
</TR>
<TR>
<TD>Solu 3</TD> <TD>Solu 4</TD>
</TR>
</TABLE></TD>
</TABLE>
</CENTER>
Taulu 1
Solu 1 Solu 2
Solu 3 Solu 4
Taulu 2
Solu 1 Solu 2
Solu 3 Solu 4
Taulu 3
Solu 1 Solu 2
Solu 3 Solu 4

Siirry alkuun

Taulukkopohja ja lähdekoodi sen toteuttamiseen

<TABLE BORDER WIDTH=100%> (Begin Table 1)
<TR>
<TD WIDTH=25%>
TOP STORIES <TABLE BORDER
WIDTH=166> (Begin Table 2)
<TR>
<TD>

</TD>		 <TD>
TEXT TEXT
</TD></TR>
<TR>
<TD>

</TD>		 <TD>
TEXT TEXT
</TD></TR>
</TABLE> (End Table 2)
</TD>		 <TD>
<TABLE BORDER
WIDTH=100%> (Begin Table 3)
<TR> <TD COLSPAN=2>
PHOTO
PHOTO
PHOTO
</TD></TR>
<TR> <TD COLSPAN=2>Photo Credit </TD></TR>
<TR> <TD COLSPAN=2>Photo Caption</TD></TR>
<TR> <TD COLSPAN=2>Story Heading</TD></TR>
<TR> <TD WIDTH=50%> TEXT
TEXT
TEXT
TEXT
</TD> 		<TD>TEXT
TEXT
TEXT
TEXT
</TD></TR>
</TABLE> (End Table 3)
</TD></TR> </TABLE> (End Table 1)

Siirry alkuun

Edellisen taulukon soveltamien julkaisun etusivuna

NEWSPAPER COLUMNS WITHOUT BORDERS

Modified: June 10, 1996 - Copyright © The Capital
TOP STORIES
OTHER SECTIONS
Key underwater grasses flourish here, but not elsewhere in bay
Pro sports teams spent millions lobbying state lawmakers
Bay watchdog group targets changing habits of people
Rented life raft a life-saver for pair stranded while at sea
Anti-drunken boating group moving to 'nautical capital'
Best Bets!
Key upcoming Annapolis-area events
NAVY NEWS
News and notes from the Naval Academy
Surviving members of sunken ship's crew reunite in city
Mid will not face court-martial over sex-assault charge
ABOUT THE CAPITAL ONLINE
We welcome your feedback...

By Mark Odell -- The Capital

Like shepherds, kayakers keep the event's 600 swimmers from straying during the 4.4 mile swim.

Winners abound in annual swim across the Chesapeake

By MARK DAVENPORT
Staff Writer

With dozens of kayaks and dive boats following closely, a mile-long chain of swimmers proved yesterday that on a good day human spirit can conquer the 4.4-mile-wide the Chesapeake Bay.

The first person to clamber onto the beach at Kent Island was former Olympic swimmer Jeff Kostoff, 30, of Potomac. With a time of 1 hour 35 minutes, he fought through two-foot seas at the pace of a sailboat in light wind.

The female winner was Kelly McPherson, 18, of Baltimore one of the youngest entrants. She finished only seven minutes behind Mr. Kostoff.

In all, there were 600 swimmers from 23 states, including Arizona, California and Washington, raising about $30,000 for the March of Dimes. Twelve swimmers were over 60, with the oldest 72. One senior entered the race with four of his children.

Perhaps the real winners were people such Mike Doyle of Pennsylvania who lost a leg in a motorcycle accident 20 years ago. He finished in the upper half of the pack in his eighth

(See BAYSWIM)

Siirry alkuun