Tabele HTML colorate folosind COLORIZE (plugin jQuery)

Autor: margeo. Data: 10 Feb 2010
0

În cele ce urmează voi prezenta câteva tehnici de modificare a unui tabel HTML pentru a avea un design mai plăcut.

Vom avea nevoie de un plugin jQuery numit COLORIZE ce se poate descărca de aici. Nu uitati să includeţi întâi şi librăria jQuery.

COLORIZE este un plugin care (după cum îi spune şi numele) dă o culoare tabelului şi evidenţiază rândurile atunci când se trece cu mouse-ul deasupra sau se face un click pe un rând. Se pot face modificări ale culorilor şi altor opţiuni. Vizitaţi pagina oficială din link-ul de mai sus pentru mai multe detalii.

Să luăm ca exemplu următorul tabel simplu:

ce are codul HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<th>Nume</th>
<th>Oras</th>
<th>Adresa</th>
<tr><td>Popescu Ion</td><td>Bucuresti</td><td>Str Facliei nr 2</td></tr>
<tr><td>Georgescu Margareta</td><td>Iasi</td><td>Str Florilor</td></tr>
<tr><td>Gica Contra</td><td>Cluj</td><td>Str Gropilor</td></tr>
<tr><td>Ungureanu Mircea</td><td>Oradea</td><td>Str Asfaltata</td></tr>
</table>
</body>
</html>

La acest tabel îi aplicăm pluginul colorize

În partea de HEAD am adăugat codul de mai jos

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="colorize.js"></script>
<script>
$(document).ready(function(){
$("#tabelul_meu").colorize(); // tabelul_meu este ID-ul tabelului
});
</script>

iar tabelul a primit id-ul tabelul_meu

<table id="tabelul_meu">

În continuare, folosim puţin CSS pentru a modifica fontul, culoarea headerului, să punem spaţiu între celule şi să aliniem la stânga.

Am creat un fisier stil.css unde am pus următorul cod

#tabelul_meu
{font-family:Verdana;font-size:12px;}
#tabelul_meu th
{background-color:Navy;color:white;padding:5px;text-align:left;}
#tabelul_meu td
{padding:5px;text-align:left;}

iar in html am adaugat in partea de HEAD.

<link href="stil.css" rel="stylesheet" type="text/css" />

Toate fişiere sunt în acelaşi director. Codul HTML complet se află mai jos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabel colorat</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="colorize.js"></script>
<script>
$(document).ready(function(){
$("#tabelul_meu").colorize();
});
</script>
<link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="tabelul_meu">
<th>Nume</th>
<th>Oras</th>
<th>Adresa</th>
<tr><td>Popescu Ion</td><td>Bucuresti</td><td>Str Facliei nr 2</td></tr>
<tr><td>Georgescu Margareta</td><td>Iasi</td><td>Str Florilor</td></tr>
<tr><td>Gica Contra</td><td>Cluj</td><td>Str Gropilor</td></tr>
<tr><td>Ungureanu Mircea</td><td>Oradea</td><td>Str Asfaltata</td></tr>
</table>
</body>
</html>

Niciun comentariu.

Scrie un comentariu