جداول در وبسایت (table)
در جلسه سوم با مفهوم css و نحوه استایل دهی به تگ ها آشنا شدیم.در ادامه با رسم جداول در وب سایت آشنا میشویم.
برای ساختار صفحات وب از تگ <div> استفاده میکنیم،در گذشته از table استفاده می شد.
<table></table>
تگ table:
در تگ table تگ داریم به نام تگ <tr></tr> که ردیف هر جدول را مشخص میکند.
- در اولین تگ <tr> با استفاده از تگ <th></th> عناوین هر ستون را مشخص میکنیم.
- در تگ های بعدی <tr> از تگ <td></td> استفاده میشه.
نکته: هرچند تا تگ <th> داشته باشیم در هر ردیف باید همان تعداد تگ <td> داشته باشیم.
<body>
<table>
<tr> <th> عنوان اول </th> </tr>
<tr> <td> متن اول </td> </tr>
<tr> <td> متن دوم </td> </tr>
<tr> <td> متن سوم </td> </tr>
</table>
</body>
خروجی کد بالا:
تگ table
استایل دهی به جداول در وب سایت:
در کد css می توانیم به جداول در وب سایت استایل دهیم.
*توجه داشته باشید ابتدا با استفاده از تگ <link> استایل را فراخوانی میکنیم*
td , th {
border: 1px solid red ;
font: 12px tahoma;
}
در کد بالا تعریف کردیم که تمام تگ های td و th مون : فونت ۱۲ پیکسل و tahoma ، حاشیه با ضخامت ۱پیکسل و خط صاف قرمز رنگ .
استایل دهی به جداول
ما در تگ table سه تا تگ اصلی parent داریم:
- تگ thead:
در همان تگ <table> تگ <thead> ایجاد میکنیم. در تگ <thead> فقط از تگ های <th></th> استفاده میکنیم.(<tr> هارا پاک میکنیم) - تگ tbody:
در تگ <tbody> ردیف هامون را قرار می دهیم. ( کل تگ های <tr> برمیداریم در <tbody> میگذاریم. - تگ tfoot:
چون کمتر استفاده میشود فعلا خالی می گذاریم.
<body>
<table>
<thead>
<th> عنوان اول </th>
</thead>
<tbody>
<tr> <td> متن اول </td> </tr>
<tr> <td> متن دوم </td> </tr>
<tr> <td> متن سوم </td> </tr>
</tbody>
<tfoot> </tfoot>
</table>
</body>
می رویم سراغ کد css :
برای تمام table های من و تمامی th و td هایی که در table هستند تعریف میکنیم:
table , td , th {
border: 1px solid red ;
font: 12px tahoma;
border-collapse: collapse;
}
با کد border-collapse: collapse حاشیه جدول بهم میچسبد
خروجی کد بالا را مشاهده کنید:
تگ های اصلی در table
حالا اگر بخواهیم عرض table کل مرورگر را بگیرد.فقط کافی ست کد زیر را به ابتدای css مون اضافه کنیم:
table{
width: 100%;
}
در ادامه می خواهیم همه ی td ها و th ها وسط چین باشند:
table , td , th {
text-align: center;
padding: 10px;
}
توجه داشته باشید padding ارتفاع هر خانه را مشخص می کند.
وسط چین کردن محتوای جدول
برای عوض کردن رنگ بک گراند هر سلول در جداول در وب سایت به انتهای کد css خود کد زیر را اضافه میکنیم:
tr:nth-child(even) {
background: #ccc;
}
برای سلول های زوج از even و برای سلول های فرد از odd استفاده میکنیم:
عوض کردن رنگ بک گراند هر سلول در جداول
برای تکمیل دوره آموزش پیشهاد میکنم پست هارو به صورت سریالی دنبال کنید: در جلسه پنجم با ویژگی های تگ a و نحوه استایل دهی به تگ a در html آبیشتر آشنا میشویم.
Warning: Undefined variable $aria_req in /home/sanazmkz/public_html/wp-content/themes/sanaz-mk/comments.php on line 32
Warning: Undefined variable $aria_req in /home/sanazmkz/public_html/wp-content/themes/sanaz-mk/comments.php on line 38