ALELUIA! ALELUIA! Consegui enfiar uma tabela dentro da outra!

[Frank K Hosaka]

Foi em 2020 que eu comecei a estudar o HTML, ele é um texto, mas usa alguns marcadores que ajuda o navegador a colocar os elementos aqui e ali.

Mas eu progredi muito pouco, só aprendi a usar <table><th><td>. Logo no começo o pessoal do fórum Script Brasil pegou no meu pé, pedindo para que eu usasse </table></th></td>. Eu não dei a menor importância, pois o navegador nunca reclamou comigo.

Mas hoje eu precisava dar um jeito de agrupar informação e também apresentar os detalhes. Não dá para usar o <details> pois ele só aceita uma informação, não mais do que isso. Eu preciso apresentar um monte de informação tanto no agrupamento bem como no detalhe. Ou seja, eu não tenho outra escolha senão aprender a criar uma tabela dentro da outra.

Uma tabela tem o resumo do agrupamento. Por exemplo, Pedido 12 R$ 500,00. Pedido 13 R$ 50,00. e assim por diante. Assim que o usuário clicar no Pedido 12, o navegador vai mostrar uma outra tabela que mostra os produtos que fazem parte daquele pedido. Nesses três anos, eu tentei, tentei e tentei, mas a informação apareceu todo embaralhado.

Só hoje é que eu encontrei um tutorial bacana que resolveu o meu problema. Tudo o que eu tenho que fazer é escolher uma célula <td>.

Uma tabela comum é assim <table><tr><td>texto<td>texto  <tr><td>texto<td>texto</table>. A escolha mais óbvia é o primeiro <td> do segundo <tr>. Assim, eu montei a minha nova tabela assim: <table><tr><td>texto<td>texto  <tr><td><table>...</table><td><td>. Estou muito contente, depois de três anos, aprendi um pouco mais de HTML!

 

<style>
	.esconde {display:none}
	.mostra {display:block}
</style>
<script>
	function alterna(e){
		if(e.className=="esconde"){e.className="mostra"} else {e.className="esconde"}}	
</script>
<table><tr><th>Grupo<th>Total<th>Obs
<?php 
for($i=1;$i<=5;$i++){
	$id="t".$i;$k=$i*1000;$l=random_int(1,500);
	echo "
	<tr onclick=alterna($id)><td>grupo $i<td>$k<td>$l
	<tr><td><table id=$id class='esconde'><td><td>";
	for($j=1;$j<=3;$j++){
		echo "
		<tr><td>sub $j<td>sub $j<td>sub $j";}
	echo "</table>";}
echo "</table>";