Come avere una tabella HTML con un bordo intorno ad esso, ma non intorno le righe

October 26

Anche se i tag table HTML possono prendere un attributo di "confine", questo attributo vale solo per l'intera tabella e sarà aggiungere bordi attorno a tutte le celle della tabella pure. Dal momento che l'attributo border è considerato obsoleto in ogni caso, usare fogli di codice CSS (Cascading Style) per definire gli stili di bordo per qualsiasi parte della tabella basata su HTML.

istruzione

1 Aprire il file HTML che contiene la tabella in testo semplice o editor di codice della vostra scelta. Buone programmi includono Notepad ++, BBedit e jEdit, ma il vecchio standby di Blocco note in Windows funziona pure.

2 Individuare i tag table nel file HTML. Tutte le tabelle iniziano con il tag <table> e terminano con la </ table> tag. Tra questi tag, <thead> definisce la sezione di intestazione, <tbody> definisce il corpo della tabella e <tr> tag definiscono righe. dati singola cella viene avvolto in <td> e </ td> tag. Questi tag non sono troppo importante, però, in quanto è necessario solo per impostare uno stile per il tag <table>.

3 Aggiungere <style> e </ style> tag all'interno <head> del file HTML. All'interno di questi tag, digitare il seguente regola di stile CSS: table {border: 1px nero solido;}. Questa regola stabilisce che tutte le tabelle della pagina Web ottenere un livello di un pixel, bordo solido nero. Switch "nero" nell'esempio dato a qualsiasi colore di nome (dei 256 colori "sicuri per il Web") o il codice esadecimale del colore, che si può ottenere utilizzando un colore-raccoglitrice. stili di bordo disponibili includono solida, tratteggiata, tratteggiata, doppio, groove, ridge, inset e fin dall'inizio.

4 Aggiungere una nuova regola di stile con lo stesso codice, ma cambiare la parola "tavolo" a qualsiasi altra tabella di tag che si desidera di destinazione. Per aggiungere bordi solo righe, per esempio, il cambiamento "tavola" a "tr" nell'esempio.

5 Modifica tag table del file HTML per leggere "<table id = 'tuo-id-name'>" per dare al vostro tavolo un ID. Per individuare solo tabella specifica nel codice CSS, passare la parola "tavolo" nell'esempio di codice CSS per "# your-id-name". Aggiungere una classe invece di un ID alla tabella se si desidera raggiungere un gruppo di tabelle, invece. In CSS, precedere il nome della classe con un punto al posto del simbolo cancelletto.

Consigli e avvertenze

  • A supporto del browser per stile CSS3 regole aumenta, si può provare a utilizzare le nuove proprietà del bordo come border-radius e border-immagine. Al momento, però, non tutti i browser supportano questi.
  • Rimuovere gli attributi obsoleti di "confine" o "cellpadding" dal tag tabella HTML. Questi interferiscono con gli stili CSS e non rendano in modo prevedibile in tutti i browser.