Crear una tabla HTML editable
Este artículo discutirá la creación de tablas HTML y cómo hacer que sus celdas sean editables.
Crear una celda en una tabla HTML
Al crear páginas web, a veces es posible que necesitemos crear tablas para la representación de datos. HTML nos proporciona el atributo tabla para lograrlo.
La sintaxis para crear una celda en una tabla es la siguiente.
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
En el código anterior, podemos ver varios elementos. <tr> es para crear filas en la tabla; dentro de esto, hemos usado un elemento <td>, que se usa para construir celdas dentro de la fila.
Código HTML completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
</body>
</html>
Como puede ver, recuperamos una tabla con una celda. Pero se muestra como texto sin formato porque no le hemos dado ningún estilo.
Agreguemos algunos estilos a la celda.
table {
background-color: rgb(139, 220, 247);
width: auto;
}
td{
border: 1px solid #000000;
text-align: center;
padding: 16px;
}
En el resultado anterior, ahora podemos verlo como una celda de tabla.
Crear una tabla editable en HTML
En algunas ocasiones, los usuarios pueden necesitar cambiar el contenido de las celdas de una tabla.
El elemento HTML table proporciona la propiedad contenteditable donde los usuarios pueden crear celdas editables. Usando esto, podemos editar fácilmente una celda de la tabla.
La sintaxis para hacer editable una celda usando el atributo contenteditable es la siguiente.
Sintaxis:
contenteditable = "value"
Podemos dar true o false como valor del atributo contenteditable. La celda puede ser editable si el valor es “true”, mientras que no podemos editar la celda si el valor es “false”.
Veamos cómo podemos hacer eso usando el ejemplo anterior con los mismos estilos. Puede cambiar los datos de la celda en consecuencia.
<table>
<tr>
<td contenteditable="true">This is a cell</td>
</tr>
</table>
En el código de ejemplo anterior, hemos agregado el atributo contenteditable dentro del elemento <td>. Luego, establecemos el valor en true.
Como resultado, podemos tener una celda editable como se muestra a continuación. Para editar la celda, podemos hacer doble clic sobre ella.
Ahora, observemos qué sucede cuando damos false como el valor del atributo contenteditable.
<table>
<tr>
<td contenteditable="false">This is an editable cell</td>
</tr>
</table>
Como puede ver, los datos o el contenido de la tabla ya no son editables. Tanto los valores true como los falsos son importantes en diferentes ocasiones.
Algunos desarrolladores crean formularios y otras cosas usando tablas. A veces, algunos datos deben permanecer como están, y ahí es donde los desarrolladores pueden usar el valor false.
Si hay datos que un usuario puede cambiar, como en el ejemplo anterior, podemos usar la opción true.
Ahora, hagamos una tabla donde podamos usar tanto “true” como “false”.
Por ejemplo, supongamos que un profesor quiere una tabla en una página web para almacenar los datos de tres estudiantes y la implementaremos. Necesita “ID del estudiante”, “Nombre” y “Grado” como encabezados de columna, y los datos que agregamos en las columnas “Nombre” y “Grado” deben ser editables.
La razón es que podría escribir el nombre incorrectamente. Además, es posible que sea necesario cambiar las calificaciones porque los estudiantes pueden solicitar correcciones.
Vamos a crear una tabla usando el siguiente fragmento de código.
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the second row -->
<tr>
<td>001</td>
<td>Simon Nick</td>
<td>A</td>
</tr>
<!-- Creating the third row -->
<tr>
<td>002</td>
<td>John Robbert</td>
<td>C</td>
</tr>
<!-- Creating the fourth row -->
<tr>
<td>007</td>
<td>Chris Henderson</td>
<td>B</td>
</tr>
</table>
Podemos ver las celdas de la tabla por separado agregando algunos estilos a la tabla.
table {
background-color: beige;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
Ahora, nuestra mesa parece más evidente que antes.
Nuestro próximo paso es establecer celdas editables. Agreguemos atributos contenteditables a las celdas relevantes con valores relevantes como se muestra a continuación.
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">001</td>
<td contenteditable="true">Simon Nick</td>
<td contenteditable="true">A</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">002</td>
<td contenteditable="true">John Robbert</td>
<td contenteditable="true">C</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">007</td>
<td contenteditable="true">Chris Henderson</td>
<td contenteditable="true">B</td>
</tr>
</table>
Como en el código anterior, hemos establecido atributos contenidos con los valores verdaderos para todas las celdas relacionadas con Nombre y Grado.
Ahora, si ejecutamos el código anterior, todas las celdas excepto las celdas ID del estudiante serán editables como se muestra a continuación.
Salida al editar los Nombres y Grados:
Salida al intentar editar las celdas ID del estudiante:
Como puede ver, no podemos editar las celdas Student ID porque el valor de contenteditable es false.
Conclusión
En este artículo, hemos discutido cómo crear una tabla HTML y cómo hacer que esa tabla sea editable usando algunos ejemplos. Además, aprendimos a usar atributos contenibles junto con los valores: true y false.
Si desea una celda editable, asigne “true” como valor, y si no necesita esa función, establezca “false” como valor o elimine el atributo.
Podemos hacer que las celdas sean editables usando JavaScript, pero esta es una forma sencilla de lograr el objetivo.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.