Cómo convertir los datos de una tabla HTML en un array de PHP

A veces, es necesario leer los datos de una tabla HTML procedente de una página web, y tal vez, tambien te sería necesario almacenar esos datos en una base de datos en vez de solo leerlos, y si encima te preguntas cómo hacerlo en PHP, me parece que hoy es tu día de suerte porque has venido al lugar adecuado. En este artículo te vamos a explicar cómo convertir los datos de una tabla HTMl en un array de PHP.

Para ello, utilizaremos estas herramientas y este entorno:

SO: Windows 8 Enterprise de 64 bits
XAMPP: XAMPP Versión 5.6.3 (PHP 5.6.3)
IDE: Notepad++
Navegador: Google Chrome
Localhost: localhost 8080

Allá vamos. Una vez hayas instalado XAMPP, asegúrate de que lo arrancas sin errores. Ve a la carpeta ~/xampp/htdoc de tu equipo. Allí es donde ubicaremos el código de la web en PHP.

En primer lugar, vamos a crear un directorio en ~/xampp/htdoc llamado MyConverter. En la carpeta ~/xampp/htdoc/MyConverter, crea un fichero PHP y llámalo index.php (puedes utilizar Notepad o Notepad++).

Antes de seguir, échale un vistazo a estas dos páginas webs:

Son dos páginas web de ejemplo en el que aparecen tablas HTML. La primera contiene una tabla con frutas, y la segunda contiene una tabla de asistencia. Como he dicho antes, estas son las tablas de ejemplo las cuales convertiremos a un array de PHP.

El código

Bien, ya estamos listos para el segundo paso. Abre el archivo index.php con tu editor de texto (Notepad++ o el que sea). Ahora tenemos que parsear el contenido de la página web, asignándolo a una variable que llamaremos $htmlContent (o como quieras llamarla). Después tenemos que crear una nueva instancia DOMDocument (con este ejemplo, podemos acceder al DOM de la página web), para cargar la variable $htmlContent con sus datos.

Sólo queremos obtener los datos de la tabla, por lo que, sólo necesitamos la cabecera de la tabla (etiqueta th) y el detalle de la tabla (etiqueta td). En este tutorial, vamos a almacenar el valor en las variables $Header y $Detail respectivamente. Este es el código.

$htmlContent = file_get_contents("http://teskusman.esy.es/index.html");
		
$DOM = new DOMDocument();
$DOM->loadHTML($htmlContent);
	
$Header = $DOM->getElementsByTagName('th');
$Detail = $DOM->getElementsByTagName('td');

En el siguiente paso, queremos obtener el nombre de las cabeceras de la tabla HTML. No es muy complicado, solo necesitamos aplicar un foreach() para obtener todas los nombres de las cabeceras, mediante el método textContent y almacenarlos en un array. El código es similar a esto:

$htmlContent = file_get_contents("http://teskusman.esy.es/index.html");
		
$DOM = new DOMDocument();
$DOM->loadHTML($htmlContent);
	
$Header = $DOM->getElementsByTagName('th');
$Detail = $DOM->getElementsByTagName('td');

//#Get header name of the table
foreach($Header as $NodeHeader) 
{
	$aDataTableHeaderHTML[] = trim($NodeHeader->textContent);
}
print_r($aDataTableHeaderHTML); die();

Si quieres ver si esta práctica ha resultado, abre el proyecto en tu navegador. Para ello, escribe localhost:8080/MyConverter, ve el código fuente de la página, y, si todo ha salido correctamente, deberías estar viendo un código parecido a este:

Esto es solo el principio, ya tenemos el nombre de las cabeceras. Ahora, queremos obtener el detalle de dichas tablas HTML. Aquí tienes el código.

$htmlContent = file_get_contents("http://teskusman.esy.es/index.html");
		
	$DOM = new DOMDocument();
	$DOM->loadHTML($htmlContent);
	
	$Header = $DOM->getElementsByTagName('th');
	$Detail = $DOM->getElementsByTagName('td');

    //#Get header name of the table
	foreach($Header as $NodeHeader) 
	{
		$aDataTableHeaderHTML[] = trim($NodeHeader->textContent);
	}
	//print_r($aDataTableHeaderHTML); die();

	//#Get row data/detail table without header name as key
	$i = 0;
	$j = 0;
	foreach($Detail as $sNodeDetail) 
	{
		$aDataTableDetailHTML[$j][] = trim($sNodeDetail->textContent);
		$i = $i + 1;
		$j = $i % count($aDataTableHeaderHTML) == 0 ? $j + 1 : $j;
	}
	print_r($aDataTableDetailHTML); die();

Abre tu navegador, ve al código fuente y vuelve a refrescar la página otra vez. Ahora verás el array PHP de la tabla HTML tal que así:

Okey, esto va bien, pero queremos mapear el array de PHP con la key (que es el nombre de la cabecera) en vez de mostrar el array con su número de índice por cada elemento. Con el fin de asignar los datos de tabla HTML a nuestro array de PHP, utilizaremos este código completo. Aquí lo tienes:

$htmlContent = file_get_contents("http://teskusman.esy.es/index.html");
		
	$DOM = new DOMDocument();
	$DOM->loadHTML($htmlContent);
	
	$Header = $DOM->getElementsByTagName('th');
	$Detail = $DOM->getElementsByTagName('td');

    //#Get header name of the table
	foreach($Header as $NodeHeader) 
	{
		$aDataTableHeaderHTML[] = trim($NodeHeader->textContent);
	}
	//print_r($aDataTableHeaderHTML); die();

	//#Get row data/detail table without header name as key
	$i = 0;
	$j = 0;
	foreach($Detail as $sNodeDetail) 
	{
		$aDataTableDetailHTML[$j][] = trim($sNodeDetail->textContent);
		$i = $i + 1;
		$j = $i % count($aDataTableHeaderHTML) == 0 ? $j + 1 : $j;
	}
	//print_r($aDataTableDetailHTML); die();
	
	//#Get row data/detail table with header name as key and outer array index as row number
	for($i = 0; $i < count($aDataTableDetailHTML); $i++)
	{
		for($j = 0; $j < count($aDataTableHeaderHTML); $j++)
		{
			$aTempData[$i][$aDataTableHeaderHTML[$j]] = $aDataTableDetailHTML[$i][$j];
		}
	}
	$aDataTableDetailHTML = $aTempData; unset($aTempData);
	print_r($aDataTableDetailHTML); die();

Tal como has hecho antes, abre tu navegador, ve al modo de visualización de código fuente y presiona F5 (actualizar) en esa página. Verás el array de PHP de la tabla HTML, ahora con su key (nombre de encabezado).

Ahora puedes intentar cambiar la url en la función file_get_contents() de http://teskusman.esy.es/index2.html a otra url que contenga una tabla en HTML.