Capítulo 13

Propriedades do objeto table - Exemplo 1

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, msg, btnAtributos, mensagem; 
	el= document.getElementById("tabela");
	msg = document.getElementById("msg");
	btnAtributos = document.getElementById("btnatr");	
	mensagem = "<h3>Propriedades do elemento <code>table</code></h3>";
	mensagem += "<ul>";
	mensagem += "<li>texto no caption: " + el.caption.innerHTML + "</li>";
	mensagem += "<li>cellpadding: " + el.cellPadding + "</li>";
	mensagem += "<li>cellspacing: " + el.cellSpacing + "</li>";
	mensagem += "<li>qde. linhas: " + el.rows.length + "</li>";
	mensagem += "<li>qde. tbody: " + el.tBodies.length + "</li>";
	mensagem += "<li>texto no tfoot: " + el.tFoot.rows[0].innerHTML + "</li>";
	mensagem += "<li>qde. de linhas do thead: " + el.tHead.rows.length + "</li>";
	mensagem += "<li>largura da tabela: " + el.width + "</li>";
	mensagem += "</ul>";
	
	btnAtributos.onclick	= function() {
		msg.innerHTML = mensagem;
	}
}
<script>

HTML

...
<table width="500" border="1" cellspacing="0" cellpadding="8" summary="Tabela com quatro linhas e cinco colunas sendo a primeira linha o cabeçalho" id="tabela">
  <caption align="top">
    Tabela demonstração Exemplo 1
  </caption>
<thead>
  <tr>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td colspan="5">Rodapé</td>
   </tr>
</tfoot>
<tbody>
  <tr>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
  </tr>
  <tr>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
  </tr>
</tbody>
</table>
<br />
<div id="msg"></div>
<button type="button" id="btnatr">Inspecionar atributos</button>
...
Tabela demonstração Exemplo 1
célula célula célula célula célula
Rodapé
célula célula célula célula célula
célula célula célula célula célula