Autor Tema: Estilos CSS para tablas ancho de tabla y anchura de celdas bordes CU01051D (Leído 2911 veces)

JurreNawijn · « **en:** 23 de Enero 2016, 00:59 »

Dejo la respuesta del siguiente ejercicio acá.

HTML:

<html>
    <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <table id="tabla1">
            <caption>Tabla 1</caption>
	   <thead>
		<tr>
			<th>Alimento</th>
			<th>Calorías (kCal)</th>
			<th>Grasas (g)</th>
			<th>Proteina (g)</th>
            <th>Carbohidratos (g)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Arándano</td>
			<td>49</td>
			<td>0.2</td>
			<td>0.4</td>
            <td>12.7</td>
		</tr>
		<tr>
			<td>Plátano</td>
			<td>90</td>
			<td>0.3</td>
			<td>1.0</td>
            <td>23.5</td>
		</tr>
		<tr>
			<td>Cereza</td>
			<td>46</td>
			<td>0.4</td>
			<td>0.9</td>
            <td>10.9</td>
		</tr>
        <tr>
			<td>Fresa</td>
			<td>37</td>
			<td>0.5</td>
			<td>0.8</td>
            <td>8.3</td>
		</tr>
        <tr>
			<td>Mandarina</td>
			<td>44</td>
			<td>0.2</td>
			<td>0.6</td>
            <td>9.2</td>
		</tr>
        <tr>
			<td>Banana</td>
			<td>90</td>
			<td>0.33</td>
			<td>1.09</td>
            <td>22.84</td>
		</tr>
	</tbody>
</table>
        <table id="tabla2">
            <caption>Tabla 2</caption>
	   <thead>
		<tr>
			<th>Nombre</th>
            <th>Apellido</th>
			<th>Teléfono</th>
			<th>Dirección</th>
			<th>Edad</th>
            
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
        		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
        		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
        		<tr>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
			<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
		</tr>
	</tbody>
</table>
        <table id="tabla3">
            <caption>Tabla 3</caption>
	   <thead>
		<tr>
			<th>verbum significatium</th>
			<th>verbum significatium</th>
			<th>verbum significatium</th>
			<th>verbum significatium</th>
            <th>verbum significatium</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
        		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
        		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
        		<tr>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
			<td>verbum significatium</td>
            <td>verbum significatium</td>
		</tr>
	</tbody>
</table>
    </body>
</html>

CSS:

Código: [Seleccionar]

table {
    text-align: center;
}
#tabla1 {
    width: 600px;
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla1 th, #tabla1 td{
    width: 20%;
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla2 {
    margin-top: 20px;
    width: 100%;
    border: 2px solid brown;
}

#tabla2 td, #tabla2 th {
    width: 20%;
    border: 2px solid brown;
}

#tabla3 {
    margin-top: 20px;
    width: 500px;
    border-bottom: 6px solid blue;
    border-collapse: collapse;
}

#tabla3 td, #tabla3 th {
    width: 100px;
    border-bottom: 6px solid blue;
    border-collapse: collapse;
}

Ogramar · « **Respuesta #1 en:** 27 de Enero 2016, 09:38 »

Buenas JurreNawijn has cumplido exactamente con lo que pedía el ejercicio

Como forma de mejorar te recomendaría que trataras de evitar la repetición de código. Por ejemplo tienes

Código: [Seleccionar]

#tabla1 {
    width: 600px;
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla1 th, #tabla1 td{
    width: 20%;
    border: 8px solid gray;
    border-collapse: collapse;
}

Para evitar la repetición de los estilos de los bordes podría organizarse así:

Código: [Seleccionar]

#tabla1 {
    width: 600px;
}

#tabla1, #tabla1 th, #tabla1 td {
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla1 th, #tabla1 td{
    width: 20%;
}

La ventaja de esto es que tenemos definido el estilo de los bordes en un único punto y si queremos cambiarlo basta cambiar en un único punto y no tenemos que hacerlo en dos puntos. La repetición de código (excepto cuando esté bien estudiada y justificada) es algo que se debe tratar de evitar.

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: