Css 6 liste si tabele

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

Liste

Diferite soiuri de liste neordonate(unordered)

<html>
<head>
<style>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Liste ordonate

<html>
<head>
<style>
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>

<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Setarea marker-ului de lista utilizând o imagine

<html>
<head>
<style>
ul
{
list-style-image: url('arrow.gif')
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Proprietati:

list-style-type
list-style-image

Tabele

Setarea layoutului (modul de afisare)

<html>
<head>
<style>
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<table>
<tr>
<td> 1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>

<br>

<table>
<tr>
<td> 1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>

</body>
</html>

Setarea distantei dintre celule

<html>
<head>
<style>
table.one
{
border-spacing: 10px
}
table.two
{
border-spacing: 10px 50px
}
</style>
</head>
<body>
<table>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<br>

<table>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>

</body>
</html>

Afisarea celulelor fara continut

Uneori am constat ca daca nu introducem nimic in celule acestea nu au border; cu empty-cells: show, putem vedea si bordura pentru acele celule.

<html>
<head>
<style>
table
{
empty-cells: show
}
</style>
</head>
<body>

<table>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
</html>

Proprietatile sunt:

table-layout border-spacing empty-cells