Hvordan lage en produktkatalog med HTML

Tabeller gi den enkleste metoden for å bygge en elektronisk katalog i HTML. En tre-kolonne tabellen gir deg plass til et bilde av produktet, beskrivelse og shipping / bestillingsinformasjon. Sette inn informasjon i tabeller reduserer mengden av tiden det tar å rettferdiggjøre tekst. I tillegg tabeller gir deg kontroll over det hvite området rundt informasjon på siden din for å forbedre utseendet og klarhet av nettstedet ditt.

Bruksanvisning

1 Definer et bord med en en-pixel grensen ved hjelp av åpningen <table> tag:

<Table border = "1">

2 Sett den første raden av celler og deres innhold med denne koden:

<Tr>

<Td>

<Img width = "60" height = "60" />

</ Td>

<Td> Dette er en beskrivelse av det første elementet. </ Td>

<Td> Denne varen er for tiden tilgjengelig. </ Td>

</ Tr>

3 Sett den andre raden av celler og deres innhold med denne koden:

<Tr>

<Td>

<Img width = "60" height = "60" />

</ Td>

<Td> Dette er en beskrivelse av det andre elementet. </ Td>

<Td> Dette elementet er på restordre. </ Td>

</ Tr>

4 Lukk bordet med endelsen tag:

</ Table>

Hint

• Dette enkle eksemplet frembringer et bord med to rekker og tre kolonner. Den første kolonnen viser en 60-by-60 pixel bilde av produktet ved å bruke <img> -taggen. Den andre og tredje kolonne viser produktbeskrivelse og aksjeinformasjon. Merk at hver rad starter og slutter med <tr> tag og hvert element i starter rad- og ender med en <td> tag. Sett så mange kolonner eller rader som du trenger for å beskrive produktet.
• Sett cellpadding kommandoen umiddelbart etter spesifikasjonen grensen i tabelldefinisjonen for å øke mengden av tomrom mellom tabellen grenser og innholdet. For eksempel <table border = "1" cellpadding = "10"> skaper en 10-pixel hvit ramme rundt innholdet i hver celle i tabellen.