در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول

خدمت همراهان سایت انجمن تخصصی فناوری اطلاعات ایران سلام و عرض ادب دارم در مباحث HTML امروز قصد دارم بر روی جداول کار کنم.جداول در صفحات وب کاربردی هست و همچنین مطالبی که داخل جداول چیده میشوند از نظر طراحی و دیزاین شکیل به نظر میرسند و همچنین مخاطب احساس بهتری در مطالب پیدا میکند تا اینکه مطالب به هم ریخته باشد.

  • تگ Table :

قبلاً در بخش اول این دوره آموزشی در باره این تگ اشاره ای شد در این مطلب بیشتر و مفصل تر و البته کاربردی تر در خصوص جداول صحبت میکنیم ، یکی دیگر از تگ های HTML تگ table می باشد که برای درج جدول مورد استفاده قرار میگیرد اجازه بدید با مثالی در نرم افزار Word این کار رو ادامه بدیم ، در نرم افزار Word از منو insert شما میتوانید یک جدول ایجاد کنید همانند تصاویر زیر:

آموزش HTML

همانطور که در تصویر فوق مشاهده میشود ستون ها را با نام column و ردیف ها یا سطر ها را با row نامگذاری میکنند در HTML ستون ها را با تگ <TD> و سطر ها را با تگ <TR> مینویسند .

ما در نرم افزار Word میتوانیم برخی از سلول ها یا خانه های جدول رو با هم ترکیب کنیم توسط Merge Cells که هم میتوانیم ستون ها را با هم ترکیب کنیم و هم ردیف ها را دقیقاً مشابه تصویر زیر ، و همانطور که در تصویر زیر ملاحضه میکنید دقیقاً ما در HTML هم میتوانیم این کار را پیاده کنیم.

کار با جداول 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>

خروجی کد بالا به صورت زیر می باشد

تگ table در html

همانطور که در تصویر نمایان است حاشیه های جدول دیده نمیشوند چون جدول ما دارای 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>

آموزش HTML و اصول اولیه طراحی سایت

تگ <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>

خروجی کد بالا به صورت تصویر زیر نمایان میگردد

قدم به قدم با آموزش HTML

  • تگ 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 ذخیره کرده و آن را با مرورگر باز میکنم

استفاده از تگ table در 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>

آموزش HTML

Valign دو خاصیت دیگه هم داره یکی baseLine به معنای خط زمینه و همچنین در برخه نسخه های HTML شما justify را خواهید دید و Center را که در واقع بیشتر به سمت چپ میرود جایی که text

در آن محل بهترین محل را پیدا میکند.

قدم به قدم با آموزش HTML

البته شما میتونید در معرفی 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 پیکسل نمایش میدهد

طراحی پایه ای وب سایت با HTML

کار با جداول و رنگ های آن را در قسمت بعدی دنبال خواهیم کرد.

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

#تگ_table_در_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #html_چیست #آمورش_html #tag_ها_در_html #آموزش_طراحی_وب_سایت #استفاده_از_تگ_های_html #کار_با_جدول_در_html #مبانی_آموزش_طراحی_وب
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....