Quiero mostrar una tabla HTML con un título en la parte superior y una línea horizontal debajo, como esta:
Veo dos formas de implementar esto, pero ambas tienen sus respectivas desventajas. El primer método es así:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
<tfoot>
<tr>
<td colspan="6">
<hr>
</td>
</tr>
</tfoot>
</table>Lo que no me gusta de esto es que tengo que usar el atributo colspan; ya sabes, la tabla real se genera a partir de datos, y descubrir el colspan significa un poco de JavaScript adicional que tengo que escribir, si lo hago así.
La otra forma sería así:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<caption style="caption-side: bottom;">
<hr>
</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>Al usar el subtítulo en lugar de tfoot, no tengo que dar el colspan, lo cual es bueno. Pero la tabla ya tiene un título y el segundo título no cumple con la especificación.
El segundo método es más simple y se ve bien en todos los navegadores con los que probé, así que prefiero eso: los navegadores parecen ser capaces de manejar muchas 'violaciones significativas' de la especificación. Pero no se siente 100% cómodo ser 'travieso' así.
P1: ¿Hay alguna manera de hacer esto sin tfoot y colspan, mientras cumple con las especificaciones al mismo tiempo?
P2: ¿los métodos anteriores realmente se ven iguales en todos los navegadores?
4 respuestas
P1: ¿Hay alguna manera de hacer esto sin tfoot y colspan, mientras cumple con las especificaciones al mismo tiempo?
Sí, haz tu estilo con CSS. HTML es un lenguaje semántico.
P2: ¿los métodos anteriores realmente se ven iguales en todos los navegadores?
En cualquier cliente moderno que cumpla con los estándares, sí lo harán.
Además, el elemento <b> no debe usarse con fines puramente estilísticos. Es una etiqueta semántica para invocar énfasis. El estilo debe hacerse con CSS (como se muestra a continuación).
table { border-bottom: 1px solid black; }
caption { font-weight:bold; }<table>
<caption>***** yada yada yada ****</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table><!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">Table Design</h1>
<h2>HTML colspan & Rowspan Attribute</h2>
<table>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Phone</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Home</td>
<td>Office</td>
<td>Present</td>
<td>Parmanent</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td>017597383</td>
<td>01784763</td>
<td>BD</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td colspan="2">017597383</td>
<td colspan="2">USA</td>
</tr>
<tr>
<td rowspan="2">Sayeed</td>
<td >Dev</td>
<td >017597383</td>
<td >017597383</td>
<td rowspan="2">USA</td>
<td >Dhaka</td>
</tr>
<tr>
<td>Dev</td>
<td >017597383</td>
<td >017597383</td>
<td >Dhaka</td>
</tr>
</table>
</center>
</body>
</html> P2: ¿los métodos anteriores realmente se ven iguales en todos los navegadores?
No, no lo hacen. El hr en tfoot es un par de píxeles más corto en comparación con el hr dentro del subtítulo, el grosor de línea de '1px solid black' no es realmente el mismo grosor de línea que el de hr, y además, el espaciado vertical varía en unos pocos píxeles ( no muchas) entre las 3 soluciones.
Pero sí, estoy de acuerdo, debe hacer esto con CSS y no usar hr en absoluto.
Simplemente agregue border-bottom al elemento table.
table {
border-bottom: 1px solid;
}<table>
<caption>caption</caption>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</tbody>
</table>