Hvordan Lage Web Layout

September 21

Mens det er mange forskjellige måter å lage en weblayout, det er en enkel måte å gjøre jobben: Bruk HTML-koder for å lage en tabell layout. HTML er universelt akseptert webutvikling språk som brukes over hele verden. Ingen nettleser vil ha problemer med å vise et nettsted designet på en HTML fundament. Tabellen layout kan vises for å vise organisatoriske grenser, om ønskelig. Vektene og stiler av disse grensene kan bli en del av Web layout.

Bruksanvisning

1 Åpne et tekstredigeringsprogram og navn og lagre det nye dokumentet ved hjelp av .html. Begynne og avslutte en tabell layout med <table> og </ bord> koder. Den <table> tag forteller leseren til å opprette en tabell med hjelp av følgende parametere; den </ table> tag forteller leseren å avslutte tabellen.

2 Lag hver tabell rad ved å bruke <tr> og </ tr> koder. Hver rad er opprettet ved hjelp av følgende kommandoer:

3 Legge til innhold (tabelldata) til hver enkelt celle i tabellen ved å bruke <td> og </ td> koder. Tabell data legges til hver rad ved hjelp av følgende kommandoer:

<Table>
<Tr>
<Td> rad 1, celle 1 </ td>
<Td> rad 1, celle 2 </ td>
<Td> rad 1, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 2, celle 1 </ td>
<Td> rad 2, celle 2 </ td>
<Td> rad 2, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 3, celle 1 </ td>
<Td> rad 3, celle 2 </ td>
<Td> rad 3, celle 3 </ td>
</ Tr>
</ Table>

4 Legg overskrifter til hver kolonne ved å bruke <th> og </ th> koder. Overskrifter er lagt til hver kolonne ved hjelp av følgende kommandoer:

<Table>
<Tr>
<Th> Kolonne 1 Heading </ th>
<Th> Kolonne 2 Overskrift </ th>
<Th> Kolonne 3 Heading </ th>
</ Tr>
<Tr>
<Td> rad 1, celle 1 </ td>
<Td> rad 1, celle 2 </ td>
<Td> rad 1, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 2, celle 1 </ td>
<Td> rad 2, celle 2 </ td>
<Td> rad 2, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 3, celle 1 </ td>
<Td> rad 3, celle 2 </ td>
<Td> rad 3, celle 3 </ td>
</ Tr>
</ Table>

5 Legg grense definisjoner til bordet ved hjelp av grensen attributtet. Borders synliggjøres ved hjelp av følgende kommandoer:

<Table border = "2">
<Tr>
<Td> rad 1, celle 1 </ td>
<Td> rad 1, celle 2 </ td>
<Td> rad 1, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 2, celle 1 </ td>
<Td> rad 2, celle 2 </ td>
<Td> rad 2, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 3, celle 1 </ td>
<Td> rad 3, celle 2 </ td>
<Td> rad 3, celle 3 </ td>
</ Tr>
</ Table>

Tallet nær grensen attributtet endrer vekten eller tykkelsen av grenselinjen som skiller cellene i tabellen.

6 Legg til en topp- og bunntekst rad til tabellen ved hjelp av colspan attributtet. Den colspan attributt er lagt ved hjelp av følgende kommandoer:

<Table border = "2">
<Tr>
<Td colspan = "3"> Header Innhold </ td>
</ Tr>
<Tr>
<Td> rad 1, celle 1 </ td>
<Td> rad 1, celle 2 </ td>
<Td> rad 1, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 2, celle 1 </ td>
<Td> rad 2, celle 2 </ td>
<Td> rad 2, celle 3 </ td>
</ Tr>
<Tr>
<Td> rad 3, celle 1 </ td>
<Td> rad 3, celle 2 </ td>
<Td> rad 3, celle 3 </ td>
</ Tr>
<Tr>
<Td colspan = "3"> Bunn Innhold </ td>
</ Tr>
</ Table>

Den colspan attributt skaper en celle som spenner over antall kolonner i tabellen. Dette attributtet skaper ikke en topptekst og / eller bunntekst rad per se, men det gir mulighet for enkel og effektiv plassering av en topp- og bunntekst rad hvis disse er ønskelig.

Hint

Det finnes forklaringer på andre HTML-attributter, for eksempel høyde, justering og bredde attributter, som er tilgjengelig på Internett, vil disse kan du videreutvikle utseendet på Web layout.