Programmazione Web » Css » Personalizzare i bordi delle tabelle
Personalizzare i bordi delle tabelle
Difficoltà:
Scritto da Alessandro Alessandrini
Sito Web: http://www.sitoservice.it 
Questo tutorial è stato letto 1841 volte
Vediamo in questo tutorial, come inserire bordi stilizzati alle tabelle utilizzando alcuni semplici attributi Css.
La visualizzazione corretta dei bordi, dipende molto dalla risoluzione video e dal browser utilizzato. Firefox di Mozilla non visualizza questa tipologia di bordi.
Bordo tratteggiato
Per inserire un bordo tratteggiato continuo a una tabella andremo ad
utilizzare l'attributo dashed.
Ecco come sarą impostato il tag Table:
<table style="border:1 dashed #4f4f4f" border="0" cellpadding="3" cellspacing="0" width="300"bgcolor="#e6e6e6">
Bordo a puntini
Utilizzando l'attributo dotted otterremo invece un bordo formato da puntini.
Ecco come sarą impostato il tag Table:
<table style="border:1 dotted #4f4f4f" border="0"cellpadding="3" cellspacing="0" width="300"bgcolor="#e6e6e6">
Bordo continuo
Vediamo ora come inserire un bordo costituito da una linea continua utilizzando l'attributo solid .
Ecco come sarą impostato il tag Table:
<table style="border:1 solid #4f4f4f" border="0" cellpadding="3" cellspacing="0" width="300" bgcolor="#e6e6e6">
Bordo
incisione
Diamo
ora un effetto di incisione al bordo utilizzando l'attributo groove.
Ecco
come sarą impostato il tag Table:
<table style="border:1 groove #4f4f4f" border="0" cellpadding="3" cellspacing="0" width="300" bgcolor="#e6e6e6">
Inserire solamente un lato del bordo
Abbiamo visto come inserire un bordo continuo alla nostra tabella.Vediamo ora come inserire un solo bordo su un solo lato della tabella. Ecco come impostare una tabella che visualizzerą un bordo tratteggiato sul lato destro:
<table style="border-right:1 dashed #4f4f4f" border="0" cellpadding="3" cellspacing="0" width="300" bgcolor="#e6e6e6">
Se volessimo impostare altri bordi sui singoli lati della tabella utilizzeremo:
border-left per il lato sinistro
border-top per il lato superiore
border -bottom per il lato inferiore
Aggiungi questo tutorial ai preferiti
