ೡ Esempi table e celle con i css



  <style type="text/css">
table.bordo_solid{
border:3px solid #826748;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}
</style>

- Table con bordo solido e spessore a 3px

<table class="bordo_solid" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
table.box1{
border:1px dotted #826748;
background-color :#f9ebec;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}
</style>

- Table con bordo dotted a 1px e sfondo/colore

<table class="box1" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
table.box2{
border:1px dotted #826748;
background-image: url('images/sfondo_rosa.jpg');
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto
}
</style>

- Table con bordo dotted a 1px e sfondo/immagine

<table class="box2" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
table.bordo_top{
border-top:1px dotted #826748;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}
</style>

- Table con bordo top

<table class="bordo_top" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
table.bordi_xx{
border-top:1px dotted #826748;
border-bottom:1px dotted #826748;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
margin-left:auto;
margin-right:auto;
}
</style>

- Table con bordo top e bottom

<table class="bordi_xx" cellpadding="2" cellspacing="2" width="400">
<tr>
<td>&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
td.bordo_solid{
border:3px solid #826748;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
}
</style>

- Cella con bordo solido e spessore a 3px

<table border="1" cellpadding="8" cellspacing="8" width="400">
<tr>
<td class="bordo_solid">&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
td.box1{
border:1px dotted #826748;
background-color :#f9ebec;
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
}
</style>

- Cella con bordo dotted a 1px e sfondo/colore

<table border="1" cellpadding="8" cellspacing="8" width="400">
<tr>
<td class="box_1">&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

  <style type="text/css">
td.box2{
border:1px dotted #826748;
background-image: url('images/sfondo_rosa.jpg');
text-align:center;
font-family : "Tahoma";
color : #826748;
font-size : 12px;
}
</style>

- Cella con bordo dotted a 1px e sfondo/immagine

<table border="1" cellpadding="8" cellspacing="8" width="400">
<tr>
<td class="box_2">&nbsp;</td>
</tr>
</table>

 


⇜ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ↭ ⇝

html & script Tutorial