Esempi tabelle

Mostro alcuni esempi di formattazione per le tabelle.

Formattazione delle tabelle coi CSS

Premetto che con questo tipo di regole è possibile far convivere più tabelle con formati diversi nella stessa pagina.

Ecco alcuni esempi

Tabella 1 Con "<table class="table_box"> "
Per th Per th
Per td Per td
   
   
<table class="table_box" width="200">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
.table_box {
    font-size: 12px;
    text-align: left;
    border-collapse: collapse;
    border: 1px solid Black;
    margin-left: 20px;
}
.table_box th {
    font-size: 13px;
    font-weight: normal;
    padding: 3px;
    background: #94C27B;
    border-top: 4px solid #4A7733;
    border-bottom: 1px solid #4A7733;
    color: #4A7733;
}
.table_box td {
    padding: 3px;
    background: #EEF7E6;
    border: 1px solid #4A7733;
    border-top: 1px solid transparent;  */
    color: #308700;
}
.table_box tr:hover td {
    background: #94C27B;
    color: #EEF7E6;
}
Tabella 2 Con "<table class="table_pers"> "
1 2
Tabella interna con tabella_perc
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
colonna1 colonna2
<table class="myTable">
<thead>
<tr>
<th class="th1">1</th>
<th>2</th>
</tr>
</thead>

<tbody>
<tr>
<td colspan="2">
<div id="myTableInner">
<table  class="tabella_perc">
<tr>
<td class="td1">riga 1 colonna1</td>
<td>riga 1 colonna2</td>
</tr>
<tr>
<td>colonna1</td>
<td>colonna2</td>
</tr>
<tr>
<td>colonna1</td>
<td>colonna2</td>
</tr>
<tr>
<td>colonna1</td>
<td>colonna2</td>
</tr>
<tr>
<td>......</td>
<td>......</td>
</tr>
<tr>
<td>......</td>
<td>......</td>
</tr>
<tr>
<td>colonna1</td>
<td>colonna2</td>
</tr>
<tr>
<td>colonna1</td>
<td>colonna2</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
.table_pers {
    width: 850px;
    background: #E1F1D6;
    margin: 0 auto;
    border: none;
    border-collapse: collapse;
}
.table_pers th {
  background-color: #94C27B;
  border: 1px solid #000;    
  color: #308700;
}
.table_pers .th1 {
    width:409px; /*    original: 413px    */
}
#table_persInner {
    height: 450px;
    overflow: auto;
    margin: 0 15px;
}
Tabella 3 Con "<table class="table_righe_piene"> "
Per th Per th
Per td Per td
   
   
<table class="table_righe_piene">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
.table_righe_piene {
    background: #fff;
    border-collapse: collapse;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-size: 12px;
    text-align: left;
}
.table_righe_piene th
{
    background: #C9CA00;
/*    border-top: 2px solid #636400;*/
/*    border-right: 2px solid #636400;*/
    border: 2px solid #636400;
    padding: 5px;
    color: #636400;
    font-weight: normal;
    vertical-align: top;
}
.table_righe_piene td
{
    border: 1px solid #C9CA00;
    background: #EEF7E6;
    color: #636400;
    vertical-align: top;
    padding: 0 5px;
}
Tabella 4 Con "<table class="tabella_colorata_a"> "
1 Ascoli
2 Atalanta
3 Avellino
4 Brescia
5 Como
6 Empoli
7 Fiorentina
8 Inter
9 Juventus
10 Milan
11 Napoli
12 Roma
13 Sampdoria
14 Torino
15 Udinese
16 Verona
 <?php
$elenco_squadre 
= array(
    
"Ascoli",
    
"Atalanta",
    
"Avellino",
    
"Brescia",
    
"Como",
    
"Empoli",
    
"Fiorentina",
    
"Inter",
    
"Juventus",
    
"Milan",
    
"Napoli",
    
"Roma",
    
"Sampdoria",
    
"Torino",
    
"Udinese",
    
"Verona"
);
echo 
"<table class=\"tabella_colorata_a\" width=\"200\">\n";
$fl 0;
$colore_1 "008000";
$colore_2 "C2C2C2";
for ( 
$i 0$i count $elenco_squadre ); $i++ ) {
    echo 
"<tr bgcolor=\"#" . ( $i%$colore_1 $colore_2 )  . "\">\n";
    echo 
"<td>" . ($i 1) . "</td>\n";
    echo 
"<td>" $elenco_squadre$i ] . "</td>\n";
    echo 
"</tr>\n";
    if (
$fl == 0) {
    
$fl 1;
    
$col $colore_1;
    } else {
    
$fl 0;
    
$col $colore_2;
    }
}
echo 
"</table>\n";
?> 
.tabella_colorata_a {
    border-collapse : collapse;
    font: 12px;
    margin-left: 20px;
}

.tabella_colorata_a td {
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 0;
}
.tabella_colorata_a th {
    border: 1px solid black;
    color: #000;    
}
Tabella 5 Con "<table class="tabella_colorata"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_colorata">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
.tabella_colorata {
    width: auto;
    background: White;
    border: 1px solid Black;
    border-collapse: collapse;
    font-size: 12px;
}
.tabella_colorata td {
    background: White;
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 0;
}
.tabella_colorata th {
    background-color: Silver;
    border: 1px solid black;
    color: #000;    
Tabella 6 Con "<table class="tabella_fissa"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_fissa" width="200">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
.tabella_fissa {
    width: 850px;
    vertical-align: top;
    background: #EEF7E6;
    border: 1px solid Black;
    border-collapse: collapse;
    font-size: 12px;
}
.tabella_fissa td {
    background: #EEF7E6;
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 5px;
}
.tabella_fissa th {
    background-color: #94C27B;
    border: 1px solid black;
    color: #308700;
Tabella 7 Con "<table class="tabella_italic"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_italic">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabella_italic {
    width: auto;
    background: #EEF7E6;
    border: 1px solid #009933;
    border-collapse: collapse;
    font-size: 12px;
}
.tabella_italic td {
    background: #EEF7E6;
    font-style: oblique;
    color: #000;
    border: 1px solid #009933;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 5px;
}
.tabella_italic th {
    background: #D9E8C9;
    font-weight: bolder;
    font-style: oblique;
    color: #3D6429;
    border: 1px solid #009933;
    vertical-align: top;
    padding: 5px;
}
Tabella 8 Con "<table class="tabella_normale"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_normale">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabella_normale {
    width: auto;
    background: #EEF7E6;
    border: 1px solid Black;
    border-collapse: collapse;
    font-size: 12px;
}
.tabella_normale td {
    background: #EEF7E6;
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 5px;
}
.tabella_normale th {
    background-color: #94C27B;
    border: 1px solid black;
    color: #308700;
}
Tabella 9 Con "<table class="tabella_perc"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_perc">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabella_perc {
    width: 100%;
   background: #eef7e6;
    border: none;
    border-collapse: collapse;
    font-size: 12px;
}
.tabella_perc td {
    color: #000;
    border: 1px solid black;
    vertical-align: top;
    padding: 0 5px 0 5px;
}
.tabella_perc .td1 {
        width:388px;
}
Tabella 10 Con "<table class="tabella_trasparente"> "
Per th Per th
Per td Per td
   
   
<table class="tabella_trasparente">
  <tr>
    <th>Per th</th>
    <th>Per th</th>
  </tr>
  <tr>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabella_trasparente {
    background: transparent;
    border-collapse: collapse;
    text-align: left;
}
.tabella_trasparente td {
    border-bottom: 1px dotted #008047;
    color: #008047;
}
.tabella_trasparente th {
    border-bottom: 1px dotted #008047;
    border-top: 1px dotted #008047;
    color: #008047;
}
Tabella 11 Con "<table class="tabellafoglio"> "
  A B
1 Per td Per td
2    
3    
<table class="tabellafoglio">
  <tr>
    <th>&nbsp;</th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <th>1</th>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <th>2</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>3</th>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabellafoglio {
    background : White;
    border-collapse : collapse;
    font: 12px;
    margin-left: 20px;
}
.tabellafoglio td {
    background: White;
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 0;
}
.tabellafoglio th {
    background-color: Silver;
    border: 1px solid black;
    color: #000;    
}
Tabella 12 Con "<table class="tabellaverde"> "
Per th Per th
Per td Per td
   
   
<table class="tabellaverde">
<tr>
<th>Per th</th>
<th>Per th</th>
</tr>
<tr>
<td>Per td</td>
<td>Per td</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table> 
.tabellaverde {
    background: #228B22;
    border-collapse : collapse;
    padding: 10px;
    font-size: 12px;
    margin-left: 20px;
}
.tabellaverde td {
    background: #D3E1C2;
    color: #000;
    border: 1px solid black;
    text-align: left;
    vertical-align: top;
    padding: 0 5px 0 0;
}
.tabellaverde th {
    background: #C2C2C2;
    border: 1px solid black;
    color: #000;
Tabella 13 Con "<table class="tabella_accessibile"> "
  A B
1 Per td Per td
2    
3    
<table class="tabella_accessibile">
  <tr>
    <th>&nbsp;</th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Per td</td>
    <td>Per td</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
.tabella_accessibile {
margin:20px auto;
padding:0;
border: 1px solid #8a9;
width:600px;
}
.tabella_accessibile th{
margin:0;
padding:0;
height:28px;
background:#ddd;
}
.tabella_accessibile td{
margin:0;
padding:0;
height:30px;
border:1px solid #f60;
}
Tabella 14 Con "<table class="clicca_su_cella"> "
<a name="resta_qui"></a>
<table class="clicca_su_cella">
<tr>
<td><a href="#resta_qui" title="Clikka qui">aaaaaaaaaa</a></td>
<td class="active"><a href="#resta_qui" title="Clikka qui">aaaaaaaaaa</a></td>
<td><a href="#resta_qui" title="Clikka qui">aaaaaaaaaa</a></td>
</tr>
</table>
.clicca_su_cella {
    border-style: none;
    color: #000000;
    padding: 0% 0% 0% 0%;
    z-index: 10;
    margin: 0;
    width: 500px;
}
.clicca_su_cella td {
    background: #EEF7E6 url(images/pulsante2.jpg);
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    border: 3px solid #94C27B;
    width: 15%;
}
.clicca_su_cella td.active {
    background: #C2C2C2 url(images/pulsante4.jpg);
    border-top-color: #E0E8DE;
    color: Maroon;
    font-family: "Comic Sans MS", sans-serif;
}

table.clicca_su_cella a:link {
    color: Purple;
    text-decoration: none;
    font-family: "Comic Sans MS", sans-serif;
    font-size: 15px;
    padding: 15px 0;
    display: block;
    width: 100%;
    height: 100%;
}
table.clicca_su_cella a:visited {
    color: #B22222;
    font-family: "Comic Sans MS", sans-serif;
    display: block;
    width: 100%;
    height: 100%;
}
table.clicca_su_cella a:hover {
    background: Green url(images/pulsante3.jpg);
    font-family: "Comic Sans MS", sans-serif;
    display: block;
    width: 100%;
    height: 100%;
}
table.clicca_su_cella a:active {
    background-color: #EEF7E6;
    font-family: "Comic Sans MS", sans-serif;
    display: block;
    width: 100%;
    height: 100%;
}

Man mano che troverò altre tabelle le aggiungerò alla lista.

 

settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum