Exemplo Básico de HTML, CSS e JS

by gsguma

HTML

<table border="1" width="100%">
    <thead>
        <tr>
            <th>Cabeçalho1</th>
            <th>Cabeçalho2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Rodapé1</th>
            <th>Rodapé2</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Conteúdo1</td>
            <td>Conteúdo2</td>
        </tr>
        <tr>
            <td class="azul">Azul (por classe)</td>
            <td id="verde">Verde (por ID)</td>
        </tr>
    </tbody>
</table>
<br />
<div id="via_js" onclick='muda_texto(this)'>Clique</div>

CSS

/*  BODY */
body { font-size: 80%; background: #e8e8e8 }
/* TABELA */
table { border: 1px solid red; }
table th, table td { padding: 5px }
table thead tr th, table tfoot tr th { background: #808080; font-weight:bold; }
/* POR CLASSE */
table tr td.azul { background-color: blue }
/* POR ID */
#verde { background-color: green }
#via_js { cursor: pointer; background: red; color: #fff; width: 35px; padding: 5px; text-decoration:underline; }

JavaScript

var i = 0;

function muda_texto(obj){
    if (obj.innerHTML == 'Clique'){
      obj.innerHTML = 'Clique de novo';
      obj.style.width = '85px';
    }
    else {
      obj.innerHTML = 'Clique';        
      obj.style.width = '';        
    }
    i++;
    if (i > 2){
        alert('Porra!\nPara de clicar!\nFuncionou!\n :)');
    }
}