TechCodeview

Etiqueta HTML de la taula s'utilitza per mostrar dades en forma de taula (fila * columna). Hi pot haver moltes columnes seguides.

Podem crear una taula per mostrar dades en forma tabular, utilitzant

A Cada taula, la fila de la taula es defineix peretiqueta, la capçalera de la taula es defineix per, i les dades de la taula es defineixen peretiquetes.

Les taules HTML s'utilitzen per gestionar el disseny de la pàgina, p. ex. secció de capçalera, barra de navegació, contingut del cos, secció de peu de pàgina, etc. Però es recomana utilitzar l'etiqueta div sobre la taula per gestionar el disseny de la pàgina.

Etiquetes de taula HTML

Exemple de taula HTML

Vegem l'exemple de l'etiqueta de taula HTML. La sortida es mostra a dalt.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Sortida:

cua en java

A la taula html anterior, hi ha 5 files i 3 columnes = 5 * 3 = 15 valors.

Taula HTML amb vorera

Hi ha dues maneres d'especificar la vora per a les taules HTML.

1. Per atribut de vora de la taula en HTML
2. Per propietat fronterera en CSS

1) Atribut HTML Border

Podeu utilitzar l'atribut de vora de l'etiqueta de taula en HTML per especificar la vora. Però ara no es recomana.

 <table class="table"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 

Sortida:

2) Propietat CSS Border

Ara es recomana utilitzar la propietat border de CSS per especificar la vora a la taula.

 table, th, td { border: 1px solid black; } 

Podeu replegar totes les vores d'una vora per propietat border-collapse. Col·lapsarà la frontera en una sola.

Negació de les matemàtiques discretes

 table, th, td { border: 2px solid black; border-collapse: collapse; } 

Sortida:

Taula HTML amb farciment de cel·les

Podeu especificar el farciment per a la capçalera i les dades de la taula de dues maneres:

1. Mitjançant l'atribut de cellpadding de la taula en HTML
2. En farciment de propietats en CSS

L'atribut cellpadding de l'etiqueta de la taula HTML està obsolet ara. Es recomana utilitzar CSS. Vegem doncs el codi de CSS.

 table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } 

Sortida:

Amplada de la taula HTML:

Podem especificar l'amplada de la taula HTML utilitzant el Amplada CSS propietat. Es pot especificar en píxels o percentatge.

Podem ajustar l'amplada de la taula segons el nostre requisit. A continuació es mostra l'exemple per mostrar la taula amb amplada.

 table{ width: 100%; } 

Exemple:

 table table{ border-collapse: collapse; width: 100%; } th,td{ border: 2px solid green; padding: 15px; } <table class="table"> <tr> <th>1 header</th> <th>1 header</th> <th>1 header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2 data</td> <td>2 data</td> <td>2 data</td> </tr> <tr> <td>3 data</td> <td>3 data</td> <td>3 data</td> </tr> </table> 

Sortida:

Taula HTML amb colspan

Si voleu fer que una cel·la abasti més d'una columna, podeu utilitzar l'atribut colspan.

Dividirà una cel·la/fila en diverses columnes i el nombre de columnes depèn del valor de l'atribut colspan.

Vegem l'exemple que abasta dues columnes.

Codi CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } 

codi HTML:

 <table class="table"> <tr> <th>Name</th> <th>Mobile No.</th> </tr> <tr> <td>Ajeet Maurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> 

Sortida:

Taula HTML amb amplitud de files

Si voleu fer que una cel·la abasti més d'una fila, podeu utilitzar l'atribut rowspan.

Dividirà una cel·la en diverses files. El nombre de files dividides dependrà dels valors de la franja de files.

Vegem l'exemple que abasta dues files.

Codi CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } 

codi HTML:

 <table class="table"> <tr><th>Name</th><td>Ajeet Maurya</td></tr> <tr><th>Mobile No.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> 

Sortida:

Taula HTML amb subtítol

La llegenda HTML es mostra a sobre de la taula. S'ha d'utilitzar només després de l'etiqueta de la taula.

random no in java

 <table class="table"> Student Records <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> 

Estil de les cel·les parells i senars de la taula HTML

Codi CSS:

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child(even) { background-color: #eee; } table#alter tr:nth-child(odd) { background-color: #fff; } table#alter th { color: white; background-color: gray; } 

Sortida:

NOTA: També podeu crear diversos tipus de taules utilitzant diferents propietats CSS a la vostra taula.

Navegadors compatibles

Element	Chrome	IE	Firefox	Òpera	Safari
	Sí	Sí	Sí	Sí	Sí