مشاوره رایگان طراحی سایت و قالب وردپرس
۰۵۱-۳۸۸۴۶۰۲۷ ۰۹۱۲۰۲۴۸۱۱۲ ۰۹۳۶۷۹۸۸۱۱۲

جداول در html

در مقاله ی آموزشی کدنویسی بصورت tablebase یاد گرفتیم که چگونه جدول ایجاد کنیم. اما در این مطلب می خواهیم کارهای بیشتری که می توانیم با استفاده از جداول در html انجام دهیم را آموزش دهیم.

رای ایجاد یک جدول همان طور که در آموزش ها قبلی ذکر شد باید از ۳ تگ استفاده کنید.

تگ TABLE:

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

تگ TR:

این تگ برای ایجاد یک سطر در جدول استفاده میشود. این نکته را در نظر داشته باشید که اگر سطری را در جدول ایجاد کنید هنوز هیچ سلولی در آن درج نکرده اید و نمیتوانید محتوایی در آن قرار دهید.

تگ TD:

توسط این تگ میتوانید یک سلول را ایجاد کنید. نکته حائز اهمیت این است که این تگ همیشه در تگ TR درج میشود. به عبارت دیگر تا سطری ایجاد نشود هیچ سلولی ایجاد نخواهد شد.

مثال : در نمونه کد زیر شما می توانید یک جدول ساده طراحی کنید.

<html>
<head>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>

شما میتوانید برای تک تک سلول ها ویا سطر ها صفات مورد نظرتان را اعمال کنید. به عنوان مثال در کد زیر رنگ زمینه سلول شماره ۳ به رنگ قرمز در خواهد آمد.

<html>
<head>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td backcolor=red> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>

سر تیترها در جداول

سر تیترها در یک جدول با تگ <th> تعریف می شوند.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

خروجی :

سلول های خالی در جدول ها

سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

خروجی : همانطور که در کد زیر می بینید حاشیه های اطراف سلول خالی از بین رفته است. برای جلوگیری از این فاصله نامطلوب به سلول داده خالی ( &nbsp; ) اضافه کنید.

مانند کد زیر :

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

خروجی :

 نکته : عناصر <thead> ، <tbody> و <tfoot> به دلیل پشتیبانی بد مرورگرها به ندرت مورد استفاده قرار می گیرند.

صفات در جداول ( Attribute )

cellpadding :

این صفت باعث میشود محتوای سلول به اندازه مورد نظر از کادر فاصله بگیرد. مثال زیر باعث میشود متن به اندازه ۵ پیکسل از کنار سلول فاصله بگیرد.

<table border="1" cellpadding="10px">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

خروجی :

cellspacing :

فاصله بین سلول ها را با این صفت تعیین می کنند.

<table border="1" cellspacing="10px">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

خروجی :

 align :

توسط این صفت میتوانید متن داخل سلول های جدول را بصورت افقی ترازبندی کنید. مقادیری که میتوانید به این صفت انتصاب دهید :

right برای راست چین کردن، left برای چپ چین کردن، center نیز برای وسط چین کردن استفاده میشود.

valign :

این صفت نیز برای ترازبندی متن سلول های جدول استفاده میشود ولی در جهت عمودی سلول،مقادیری که میتواند این صفت دریافت کند عبارتند از:

top : برای بالا چین کردن متن در سلول استفاده میشود.

middle:این مقدار برای وسط چین کردن متن در سلول استفاده میشود.

bottom: و در آخر نیز نیز این مقدار برای پایین چین کردن متون سلول استفاده میشود.

نکته : میتوانید متن های یک سلول را وسط چین در راستای افقی و پایین چین در راستای عمودی قرار دهید برای این کار میتوانید از کد زیر استفاده نمایید.

 

<table width="400" height="200" border="1">
 <tr>
  <th align="left">Money spent on....</th>
  <th align="right">January</th>
  <th align="right">February</th>
 </tr>
 <tr>
  <td valign="top">Clothes</td>
  <td valign="middle">$241.10</td>
  <td valign="bottom">$50.20</td>
 </tr>
 <tr>
  <td valign="bottom">Make-Up</td>
  <td valign="top">$30.00</td>
  <td valign="middle">$44.45</td>
 </tr>
 <tr>
  <th align="left">Sum</th>
  <th align="right">$1001.50</th>
  <th align="right">$744.65</th>
 </tr>
</table>

خروجی :

 bordercolor :

این صفت برای تعیین رنگ اصلی کادر جدول بکار میرود.میتوانید رنگ مورد نظر خود را با رنگ ثابت (red,blue,black) ویا کد رنگ (#۳۳۳) تعیین نمایید.

مثال : در کد زیر، رنگ کادر جدول قرمز می شود.

<html>
<head>
</head>
<body>
<table border="2" bordercolor="red">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

خروجی :

و در نهایت این نکته را نیز همیشه به یاد داشته باشید که اگر صفتی را به تگ table اختصاص دهید آن تگ به تمام عوامل داخل table نیز اختصاص داده میشود.

اگر صفتی فقط به تگ tr انتصاب داده شود تمامی سلول های داخل هان سطر مشمول آن صفت خواهند شد و در  نهایت اگر صفتی را به یک تگ td  اختصاص دهید صفت فقط به همان سلول انتصاب داده میشود.

اشتراک کذاری در :
سوالات متداول

توس وب تضمین میکند مطابق با مفاد قرارداد رسمی که درابتدا, متناسب با نیاز مشتری تنظیم شده عمل نماید (تحویل به موقع – پشتیبانی پس از تحویل – رعایت استاندارد های جهانی)

پشتیبانی دارای محدودیت زمانی نبوده و ما پاسخگوی تمامی مشکلات و خطاهای احتمالی سایت شما هستیم.

طراحی اختصاصی توسط تیم حرفه ای و بدون استفاده از قالب های آماده و با رعایت استانداردهای جهانی وب

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله – پس از طراحی فایل های آموزشی به صورت متنی یا ویدئویی در اختیار شما قرار می گیرد.

خیر، کارکردن با سایت بسیار آسان است، زیرا پنل تنظیمات و مدیریت سایت کاملاً فارسی بوده و آموزش کامل آن در اختیار مشتری قرار می گیرد.

توس وب از بروزترین تکنولوژی های مورد استفاده در وب از قبیل PHP,HTML5,CSS3,Java Script,Bootstrap استفاده می کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

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

پاسخ این سوال را می توان در چند جمله اینگونه بیان کرد :

پشتیبانی حرفه ای – طراحی متناسب با سلیقه و نیازهای مشتری – حجم کم کدنویسی پائین و سرعت لود بالا

با توجه به نوع وبسایت و امکانات آن بین ۲۵ تا ۶۰ روز متغیر می باشد.

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

نظرات برخی مشتریات درباره توس وب