Hvordan håndtere Table Høyde og bredde fra CSS og HTML

Hvordan håndtere Table Høyde og bredde fra CSS og HTML


CSS, som står for Cascading Style Sheets, er et sett med koder som angir hvordan en webside er lagt ut. HTML-koder, som er generelt ment for underliggende strukturen i stedet for layout og utseende, kan likevel utføre mange av de samme effektene som CSS, inkludert å sette bredden og høyden av tabeller. Det er flere metoder du kan bruke til størrelse tabeller på websider fordi mer enn én faktor påvirker tabellstørrelsen. En slik faktor er et element ved siden av et bord. Forstå hvordan du setter bordet størrelse på websider kan du lage sider som oppfyller dine design behov.

Bruksanvisning

1 Åpne Notepad eller annen ren tekst editor av ditt valg. Lim inn i det følgende HTML-dokumentet. Kodene i dette dokumentet forteller nettleseren din for å vise en tom webside. Du vil neste legge HTML-koder for å definere en tabell.

<Html>

<Head>

</ Head>

<Body>

</ Body>

</ Html>

2 Lim inn følgende HTML-tagger etter åpningen <body> -koden du limte i det siste trinnet. Disse kodene fortelle nettleseren din for å opprette en tabell der cellene og disposisjon har en ramme slik at du kan se tabellen. Bordets høyde og bredde blir automatisk dimensjonert for å gi plass til størrelsen på teksten i cellen.

<Table border = "1">

<Tr>

<Td>

Hilsener.

</ Td>

</ Tr>

</ Table>

3 Lagre dokumentet, være sikker på å legge til teksten "HTM" på slutten av filnavnet, og klikk på "Any" for filtypen.

4 Velg "Greetings" tekst, og skriv over det følgende erstatningsteksten. HTML "font" tag forteller leseren å øke størrelsen på teksten som følger koden til 24 poeng. Ved å øke tekststørrelsen, vil tabellen også utvide i bredde og lengde for å passe til større tekst.

<Font size = "24"> Hilsener. </ Font>

5 Trykk "Control" og "S" samtidig for å re-lagre dokumentet, og trykk "F5" i nettleseren din for å laste siden på nytt. Legg merke til at tabellens dimensjoner har utvidet for å gi plass til større tekst. Denne effekten bekrefter at en måte å øke tabellstørrelsen er ved hjelp av HTML for å endre tekststørrelsen i tabellen.

6 Lim inn følgende kode mellom "<head>" og "</ head>" koder i dokumentet i Notepad. Den "style" tag påkaller nettleserens CSS tolk, som lyder på "tabellen" entry som følger som en instruks om å endre størrelsen på alle tabeller i websiden.

<Style>

table {width: 700 piksler; høyde: 400px}

</ Style>

7 Resave og oppdatere websiden i nettleseren som du gjorde tidligere. Legg merke til at tabellen har vokst til flere ganger sin opprinnelige størrelse. CSS-koden du nettopp la er ansvarlig for denne endringen.