HTML Tables Kullanımı

Kendi web siteniz için kullanabileceğiniz tablo kod örnekleri – Bu sayfa HTML tabloları örnekleri içerir.

Kodu kullanmak için, metin kutusunu düz kopyalayın ve kendi web sitenize yapıştırın. Gerektiği gibi değiştirmek için çekinmeyin.

<style type=”text/css”>
table.example1 {background-color:transparent;border-collapse:collapse;}
table.example1 td {border:1px solid black;padding:5px;width:50%;}
</style>
<table class=”example1″>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Çıktısı : 

Table cell 1

Table cell 2

<style type=”text/css”>
table.example2 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example2 th, table.example2 td {text-align:center;border:1px solid black;padding:5px;}
table.example2 th {background-color:AntiqueWhite;}
table.example2 td:first-child {width:20%;}
</style>
<table class=”example2″>
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Çıktısı :

Table header	Table header
Table cell 1	Table cell 2

<style type=”text/css”>
table.example3 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example3 th, table.example3 td {text-align:center;border:1px solid black;padding:5px;}
table.example3 th {background-color:AntiqueWhite;}
table.example3 td:first-child {width:20%;}
</style>
<table class=”example3″>
<tr>
<th colspan=”2″>Table header</th>
</tr>
<tr>
<td width=”20%”>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

Çıktısı :

Table header
Table cell 1	Table cell 2

<style type=”text/css”>
table.example4 {background-color:transparent;border-collapse:collapse;width:100%;}
table.example4 th, table.example4 td {text-align:center;border:1px solid black;padding:5px;}
table.example4 th {background-color:AntiqueWhite;}
table.example4 th:first-child {width:20%;}
</style>
<table class=”example4″>
<tr>
<th rowspan=”2″>Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

Çıktısı :

Table header	Table cell 1
	Table cell 2

<style type=”text/css”>
table.example5 {background-color:GreenYellow;border:1px dotted black;width:100%;}
table.example5 th, table.example5 td {text-align:center;border:0;padding:5px;background-color:transparent;}
table.example5 th {background-color:LimeGreen;color:white;}
table.example5 th:first-child {width:20%;}
</style>
<table class=”example5″>
<tr>
<th rowspan=”2″>Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

Çıktısı :

Table header	Table cell 1
	Table cell 2

Google Plus ile Paylaş

Kısaca: seymanblog

Panelde şablon düzenle deyip, bu satırı aratarak buraya kısaca hakkımda yazısı yazabilirsiniz.