یکی دیگر از تگ های HTML تگ table می باشد که برای درج جدول مورد استفاده قرار میگیرد اجازه بدید با مثالی در نرم افزار Word این کار رو ادامه بدیم ، در نرم افزار Word از منو insert شما میتوانید یک جدول ایجاد کنید همانند تصاویر زیر:
همانطور که در تصویر فوق مشاهده میشود ستون ها را با نام column و ردیف ها یا سطر ها را با row نامگذاری میکنند در HTML ستون ها را با تگ <TD> و سطر ها را با تگ <TR> مینویسند .
ما در نرم افزار Word میتوانیم برخی از سلول ها یا خانه های جدول رو با هم ترکیب کنیم توسط Merge Cells که هم میتوانیم ستون ها را با هم ترکیب کنیم و هم ردیف ها را دقیقاً مشابه تصویر زیر ، و همانطور که در تصویر زیر ملاحضه میکنید دقیقاً ما در HTML هم میتوانیم این کار را پیاده کنیم.
تگ table دارای attribute زیادی هست که جلوتر خدمتتان توضیح خواهم داد ، پس از نوشتن تگ <table> با هر بار نوشتن تگ <tr> میتوانید یک خط ایجاد کنید پس tr به نشانه table row می باشد پس به ازا< هر چند ردیفی که میخواهید باید tr را اضافه کنید و قبل از اینکه تگ tr بسته شود یعنی در داخل تگ <TR> باید تعداد ستون هایی را مشخص کنید در کد زیر ملاحضه میکنید که در سطر اول ما سه ستون داریم که داخل هر ستون را به x1 تا x3 نام گذاری کردیم. در ادامه کد ها یعنی دقیقاً پس از پایان تگ <tr/> من میخواهم یک ردیف دیگر با سه ستون ایجاد کنم که هر ستون را با y1 تا y3 نام گذاری میکنم ، و در نهایت تگ table را میبندیم.
<body> <table> <tr> <td>X1</td> <td>X2</td> <td>X3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </table> </body>
خروجی کد بالا به صورت زیر می باشد
همانطور که در تصویر نمایان است حاشیه های جدول دیده نمیشوند چون جدول ما دارای Border نیست در ادامه جدول را دارای border میکنیم برای این منظور فقط کافی است در جلو تگ table مقدار border را وارد کنیم ، اگر مقدار border برابر 0 باشد یعنی همان تصویر بالایی که بدون حاشیه بود پس توسط کد زیر به جدولمان حاشیه ای به اندازه 2 میدهیم
<body> <table border="2"> <tr> <td>X1</td> <td>X2</td> <td>X3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </table> </body>
تگ <th> :
این تگ در اولین سطر جدول به کار میرود و مخفف table header است بنابر این میتوانیم سر ستون های table را توسط این تگ مشخص کنیم خاصیت th این است که value خودش را به صورت BOLD نمایش میدهد پس برای عنوان نویسی در جدولمان th گزینه خوبی است در ادامه مثالی را خواهیم دید
<body> <table border="2"> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table> </body>
خروجی کد بالا به صورت تصویر زیر نمایان میگردد
- تگ caption
شما میتوانید یک تیتر یا عنوان فرعی برای جدول خود معرفی کنید بدین صورت که بلافاصله پس از تگ table و قبل از اینکه tr را باز کنید میتوانید از تگ Caption استفاده کنید و این تگ نیز مانند سایر تگ ها در HTML دارای Style می باشد بنابر این وقتی از caption استفاده کنید آن متن در داخل table نمایش داده نمیشود همانند مثال زیر:
<body> <table border="2"> <caption style="font-weight:bold"> How to Use caption in table... </caption> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table> </body>
کد زیر را با پسوند html ذخیره کرده و آن را با مرورگر باز میکنم
- align
این Attribute جهت align text در داخل جدول هست یعنی جهتی که text در جدول قرار میگیرد یا به عبارتی تمایل text به سمت چپ ، راست یا وسط که این سه جهت به صورت زیر بیان میشود
<body> <table border="2" width="307"> <tr> <td align="left" width="81">Left cell</td> <td align ="right" width="93">Right cell</td> <td align="center">Center cell</td> </tr> </table> </body>
همانگونه که در کد و تصویر فوق ملاحضه میشود توسط خاصیت width نیز جدول را طوری تنظیم کردیم که بتوان حالت چپ چین و راست چین را تشخیص دهیم همین کار را میتوان بر روی جدول های دیگر انجام داد.
- valign
این Attribute مخفف Vertical هست یعنی تمایل عمودی Text رو به سه حالت بالا ، پایین و همچنین وسط و به صورت کد زیر بیان میشود
<body> <table border="2" height="59" width="312"> <tr> <td valign="top" width="80">top cell</td> <td valign="bottom">Bottom cell</td> <td valign="middle" width="102">middle cell</td> </tr> </table> </body>
Valign دو خاصیت دیگه هم داره یکی baseLine به معنای خط زمینه و همچنین در برخه نسخه های HTML شما justify را خواهید دید و Center را که در واقع بیشتر به سمت چپ میرود جایی که text
در آن محل بهترین محل را پیدا میکند.
البته شما میتونید در معرفی TR از Style جهت اندازه طول و عرض جدول استفاده کنید و فکر میکنم این قابلیت برای شما راحت تر باشه چون یک بار در tr مینویسید و هر چند تا td در سطر وجود داشته باشه بهش اعمال میشه مثال زیر رو با هم ببینیم
<body> <table border="2"> <tr style=width:"80px"> <td align="left">www.</td> <td align="center">itpro</td> <td align="right">.ir</td> </tr> </table> </body>
همانطور که میبینیم tr با style ای انتخاب شده که کل ستون ها را برابر با عرض یا (width) برابر 80 پیکسل نمایش میدهد
هاشم