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 |
Arquivos exemplo: « anterior | próximo »