Aprendizaje de HTML, Parte 25: Uso de atributos de ancho y alto en tablas HTML
Para aquellos de ustedes que han leído material de aprendizaje HTML anteriormente, por supuesto, están familiarizados con los atributos de ancho y alto.
La aplicación de estos dos atributos no solo se limita a las tablas HTML, sino que también se usa para establecer el tamaño del contenido en HTML, como las imágenes.
Para aquellos de ustedes que todavía no entienden cómo hacerloTablas HTML y atributos comúnmente utilizados en tablas HTML, puede consultar los artículos anteriores para aumentar su comprensión antes de continuar con este artículo.
En general, la aplicación de atributos de ancho y altola etiqueta <table> solo es compatible con HTML4.01 pero no es compatible con HTML5. Aun así, también debe saber cómo usar ambos atributos en la etiqueta <table> como aprendizaje. Ahora, para obtener más detalles sobre cómo usar estos dos atributos, veamos la explicación a continuación.
Atributo de ancho
El atributo de ancho en la tabla se usa paradeterminar el ancho de la tabla. Si no establece el ancho de la tabla con el atributo ancho, entonces el ancho de la tabla coincidirá con el ancho necesario para mostrar los datos. La sintaxis del atributo ancho es:
<table width="pixel atau %">
En el atributo ancho hay dos valores que se pueden aplicar, a saber:
Valor | Función |
píxel (px) | Establecer ancho en píxeles, por ejemplo: 400px o 400 solamente |
por ciento (%) | Establezca el ancho en porcentaje de los elementos circundantes, por ejemplo: 30% |
El siguiente es un ejemplo del código de escritura y el uso del atributo de ancho en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Width di HTML</title>
</head>
<body>
<table width="400" border="2">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>
Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
Atributo de altura
El atributo de altura en la tabla se usa paradeterminar la altura de la mesa. Al igual que con el atributo de ancho, si no establece la altura de la tabla utilizando el atributo de altura, la altura de la tabla coincidirá con la altura necesaria para mostrar los datos. La sintaxis del atributo de altura es:
<table height="pixel atau %">
En el atributo de altura hay dos valores que se pueden aplicar, a saber:
Valor | Función |
píxel (px) | Establezca el ancho en píxeles, por ejemplo: 150 píxeles o solo 150 |
por ciento (%) | Establezca el ancho en porcentaje de los elementos que lo rodean, por ejemplo: 10% |
Aquí hay un ejemplo de escritura de código y uso del atributo de altura en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Height di HTML</title>
</head>
<body>
<table border="2" height="150">
<tr>
<th width="50">No</th>
<th>NIM</th>
<th>Nama</th>
</tr>
<tr>
<td align="center">1</td>
<td>071401001</td>
<td>Ridayanti</td>
</tr>
<tr>
<td align="center">2</td>
<td>071401002</td>
<td>Ahmad Zulham</td>
</tr>
<tr>
<td align="center">3</td>
<td>071401003</td>
<td>Zulaikha</td>
</tr>
</table>
</body>
</html>
Después de ejecutar el código anterior en el navegador, aparecerá como se muestra a continuación:
Debido a que estos dos atributos no son compatibles con HTML5, se recomienda que use CSS en la configuración de ancho y alto de tabla. La sintaxis de ancho y alto en CSS son:
<table style="width:400px; height:150px;">
Todo eso es material para usar los atributos de ancho y alto en las tablas en HTML, ojalá puedas entender bien el material anterior.