آموزش گام به گام CSS 2.0 بخش نوزده

 

CSS Tables :
 
برای تعیین border در table از خاصیت border در css استفاده میکنیم.

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
table,th,td
{
border:1px solid black;
}
<./style>
<./head>
<.body>
<.table>
<.tr>
<.th>نام<./th>
<.th>نلم خانوادگی<./th>
<./tr>
<.tr>
<.td>حسن<./td>
<.td>احمدی<./td>
<./tr>
<.tr>
<.td>حسین<./td>
<.td>شجاعی<./td>
<./tr>
<./table>
<./body>
<./html>

 

نکته:
در مثال بالا بدلیل این که table و th/td هرکدام border جداگانه دارند هنگام نمایش بصورت border دو خط نمایش داده میشود.
 
برای نمایش border بصورت تکی از خاصیت border-collapse بشکل زیر استفاده میشود.

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
<./style>
<./head>
<.body>
<.table>
<.tr>
<.th>نام<./th>
نام خانوادگی<./th>
<./tr>
<.tr>
<.td>حسن<./td>
<.td>احمدی<./td>
<./tr>
<.tr>
<.td>حسین<./td>
<.td>شجاعی<./td>
<./tr>
<./table>
<.p><.b>Note:<./b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results
in IE8 and earlier versions.<./p>
<./body>
<./html>

تذکر:
برای نمایش عملکرد دقیق border-collapse در مرورگر IE8 و قبلتر اید حتما در ابتدای کد تعریف شود.
 
برای تنظیم طول وعرض table در css از خاصیت width و height بصورت زیر استفاده میکنیم.

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
<./style>
<./head>
<.body>
<.table>
<.tr>
<.th>نام<./th>
<.th>نام خانوادگی<./th>
<.th>تخفیف<./th>
<./tr>
<.tr>
<.td>حسن<./td>
<.td>احمدی<./td>
<.td>$100<./td>
<./tr>
<.tr>
<.td>حسین<./td>
<.td>شجاعی<./td>
<.td>$150<./td>
<./tr>
<.tr>
<.td>علی<./td>
<.td>دایی<./td>
<.td>$300<./td>
<./tr>
<.tr>
<.td>احمد<./td>
<.td>حسنی<./td>
<.td>$250<./td>
<./tr>
<./table>
<./body>
<./html>