Hvordan runde hjørner på HTML-tabeller

May 2

I Hypertext Markup Language (HTML), er enhver avdeling eller bord formatert som standard med rette vinkler: alle fasonger er rektangulære. Dette gir større brukervennlighet layout og koding. Imidlertid, noen ganger er det behov for avrundede hjørner for å foreta aspekter ved en side skiller seg ut. Denne prosessen krever ikke noen spesiell koding, men heller er avhengig av bruk av bilder innenfor den standard rektangulær utforming.

Bruksanvisning

Design Corners

1 Begynn en ny fil i bilderedigeringsprogrammet.

2 Lag en liten firkant bilde. Start ut med en 40 x 40 piksler. Du kan endre disse dimensjonene senere hvis du vil ha større eller mindre kurver. Innenfor dette bildet, skaper en sirkel.

3 Shade innsiden av sirkelen med samme farge som skal brukes for tabellen. Shade utvendig med samme farge som skal brukes for din bakgrunn. Hvis du ønsker å ha en gjennomsiktig bakgrunn, ikke skygge på utsiden, men sørg for å lagre bildet som en gjennomsiktig GIF-fil.

4 Skjær bildet inn i fire kvadranter. Lagre hver kvadrant som en selvstendig fil. Bruk et filnavn som tydelig angir posisjonen til corner. For eksempel, hvis du har opprettet i øvre venstre hjørne, lagre bildet som "cornerUL.gif."

HTML

5 Åpne koden på nettsiden din.

6 Finn de aktuelle tabellkoder. Sett den første kolonnebredden til pixel bredde på hjørnet bildet. For eksempel, hvis din hjørnet er en 20 x 20 piksler, skriver du inn følgende attributt:

7 Skriv inn en <img> -taggen i tilsvarende første cellen i den første kolonnen. Hjørnet bilde utgjør innholdet i den cellen. Gjør attributtene av bildet matche de ønskede dimensjoner, og sette grensen lik 0. For eksempel:

8 Skriv lignende <img> koder for hver av de andre hjørnecellene. De tilsvarende rader og kolonner av disse cellene vil utgjøre grensen av tabellen.

Hint

Varier dimensjonene på originalbildet (og tilsvarende bredder på dine celler) for større eller mindre hjørner.