HTMLساخت جدول در
برای ساخت جدول در html باید سلولها، سطرها و ستونهای جدول را تعریف کنیم.
- عناصر جدول داخل تگ <table> تعریف میشوند.
- هر سلول داخل تگهای ابتدایی و پایانی <td> تعریف میشود.
- هر سطر داخل تگهای ابتدایی و پایانی <tr> تعریف میشود.
- اگر بخواهید برخی سلولها را به عنوان سلولهای هدر استفاده کنید بجای <td> باید از <th> استفاده کنید.
<table>
<tr>
<th>نام</th>
<th>تلفن</th>
<th>آدرس</th>
</tr>
<tr>
<td>مریم</td>
<td>تهران</td>
<td>021-12345</td>
</tr>
<tr>
<td>علی</td>
<td>تهران</td>
<td>021-67890</td>
</tr>
</table> HTMLسفارشی سازی جدول در
بعد از ساخت جدول میتوانیم یکسری ویژگی ها از جمله رنگ پس زمینه، ویژگیهای بردر، سایز سلولها و… مطابق با نیازمان تغییر دهیم.
توجه کنید که این ویژگیها باید در قالب css تعریف شوند.
table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { background-color: #96D4D4; }
- مطابق با نیازتان میتوانید از table, th,td در این قالب استفاده کنید، به این صورت که حضور table باعث میشود این ویژگیها بر روی ساختار جدول اعمال شود و وجود th,td به سفارشی سازی سلولها و هدر میپردازد.
- border برای جدول خطوط جدا کننده رسم میکند که میتوانیم ضخامت خطوط را با مقیاس پیکسل (px)، نوع خطوط شامل: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden و درنهایت رنگ خطوط را مشخص کنیم.
- با استفاده از border-collapse:collapse خطوط جدا کننده به صورت یک خط نمایش داده میشوند.
- background-color نیز رنگ سلولهای جدول را نمایش میدهد.
- border-color و border-style میتوانند به ترتیب رنگ خطوط و شکل خطوط را تعیین کنند.
- اگر قصد دارید ظاهر جدول را با لبه های گرد طراحی کنید مطابق مثال زیر از border-radius استفاده کنید.
table, th, td { border: 1px solid black; border-radius: 10px; }
- با توجه به مثال زیر و با استفاده از height و width میتوانیم سایز جدول و طول و عرض سلولها را تعیین کنیم:
<table style=”width:100%”>
<tr>
<th style=”height:70px”>نام</th>
<th>آدرس</th>
<th>تلفن</th>
</tr>
<tr style=”height:200px”>
<td>مریم</td>
<td>تهران</td>
<td>021-12345</td>
</tr>
<tr>
<td>علی</td>
<td>تهران</td>
<td>021-56789</td>
</tr>
</table> سفارشی سازی کپشن و متون داخل جدول
- میتوان با استفاده از text-align محل قرارگیری متن داخل سلول و یا هدر را مشخص کرد.
- برای merge یا ادغام چندین ستون باید از ویژگی colspan استفاده کرد و تعداد سلولهایی که لازم است با هم ادغام شوند را به عنوان ورودی برای آن تعیین میکنیم همچنین rowspan به صورت مشابه به ادغام سطرها میپردازد.
- برای درج کپشن از تگ <caption> استفاده میشود.
<table><caption>مشخصات کاربران</caption>
<tr>
<th colspan=”2″>نام</th>
<th>آدرس</th>
</tr>
<tr>
<td>مریم</td>
<td>تهران</td>
<td>021</td>
</tr>
<tr>
<td>علی</td>
<td>کرج</td>
<td>026</td>
</tr>
</table> فاصله گذاری در جدول
دو نوع فاصله گذاری در جدول وجود دارد یکی فاصله بین سلولها و دیگری فاصله بین محتوای سلولها با خطوط سلول.
با استفاده از padding فاصله محتوای سلول با دیواره های سلول و با استفاده از spacing فاصله بین سلولها از هم را مشخص میکنند.
th, td { padding-top: 10px; padding-bottom: 20px; padding-left: 30px; padding-right: 40px; }
table { border-spacing: 30px; }
سفارشی سازی ستونها به صورت گروهی
با استفاده از تگ <colgroup> میتوان ستونها را به صورت گروهی یا تکی سفارشی سازی کرد.
براساس مثال زیر ابتدا 2 ستون اول جدول به رنگ D6EEEE# درآمده و 3 ستون بعدی بدون تغییر باقی مانده و سپس 4 ستون بعدی نیز به رنگ صورتی درخواهند آمد. به همین ترتیب میتوان سایر تغییرات دلخواه را بر ستونها به صورت گروهی اعمال کرد.
<table> <colgroup> <col span=”2″ style=”background-color: #D6EEEE”>
<col span=”3″> <col span=”3″ style=”background-color: pink”> </colgroup>