Hvordan Juster bilder i en celle

November 29

HTML-tabeller kan du presentere data på en webside i tabellform. For eksempel kan produktsiden inneholder en tabell som viser produktbeskrivelser og bilder. Hvert bord består av celler som befinner seg i rader og kolonner. Tabeller har også flere egenskaper som kontrollerer hvordan eks ser i hver celle. Ved hjelp av disse egenskapene, kan du justere bilder horisontalt og vertikalt i en celle.

Bruksanvisning

1 Åpne Notisblokk og lim inn følgende HTML-kode i et tomt dokument:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Table Cell Alignment bilde Tekst </ title>

.cellAlign {

text-align: center; vertical-align:; midten;

height: 200px; width: 200px;

}

</ Style>

</ Head>

<Body>

<Tr>

<Img />

</ Td>

</ Tr>

<Tr>

</ Tr>

</ Table>

</ Body>

</ Html>

Dette skaper en tabell som inneholder to rekker og to kolonner. Fire "td" tags definere de fire cellene i tabellen. Merk at hver celle har en "img" tag. At tag plasserer et bilde som heter "xyz.jpg" i hver celle.

2 Endre "xyz.jpg" til navnet på en faktisk bilde på harddisken.

3 Gjennomgå "style" tag nær toppen av HTML-koden. Den definerer en CSS-klasse som heter "cellAlign." Denne klassen avgjør hvor hver celle i tabellen ser ut. Den har en egenskap kalt text-align som styrer vannrett justering i en celle. Den har også en egenskap kalt vertikal-align som styrer vertikal justering. Den text-align eiendommen har en verdi på "center", og den vertikale-align eiendommen har en verdi på "middle".

4 Trykk "Ctrl" og "S" for å åpne Notepad er "Lagre som" -vinduet. Type "Cell_Alignment_Image_Test.html i" File Name "tekstboksen og klikk" Lagre "for å lagre dokumentet som en HTML-fil.

5 Start Windows Utforsker og finn at HTML-fil. Dobbeltklikk på den. Nettleseren vil åpne og vise fire bilder i tabellceller. Bildene vil være sentrert i cellene fordi hver celle text-align og vertical-align verdier er "sentrum" og "middle".

6 Gå tilbake til HTML-dokumentet i Notisblokk, og finn "style" tag igjen. Endre ordet "center" til "venstre" i text-align eiendom. Endre ordet "midten" til "bunnen" i vertikal-align eiendom. Trykk "Ctrl" pluss "S" for å lagre filen.

7 Gå tilbake til nettleseren din og trykk "F5" for å oppdatere innholdet. Bildet justering vil endre seg i cellene. Bilder vises i nedre venstre hjørne av cellene på grunn av endringene du har gjort i "cellAlign" -klassen.

Hint

Ved å endre verdiene av text-align og vertikal-align, kan du plassere bilder inni cellene i en rekke måter. Du kan bruke sentrum, venstre og høyre som verdier for text-align eiendom som styrer vannrett justering. Bruk midten, topp og bunn som verdier for vertikal-align eiendom.