close
متخصص ارتودنسی
آموزش HTML - ایجاد جدول با استفاده از تگ table



فرهنگی هنری اجتماعی
قالب وبلاگ
تبلیغات
Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز
تبلیغات
ارتباط با مدیر
استعلام ثبت سایت


پیامک به سایت

شماره سامانه پیام کوتاه  وب سایت

شهید جاویدان )

30005367423000


محل تبلیغ شما
تعرفه تبلیغات را ببینید

اعضاء
ورود اعضاء
نام کاربری :
رمز عبور :

رمز عبور را فراموش کردم ؟


عضویت در سایت
نام کاربری :
رمز عبور :
تکرار رمز :
ایمیل :
نام اصلی :
کد امنیتی : * کد امنیتیبارگزاری مجدد
درباره ما
فروش آلبومهای مجاز موسیقی و نرم افزارهای موسیقی مجاز در سراسر ایران فروش آلوم عطر موهات با صدای هومن آذریان دارای مجوز رسمی و ثبت در کتابخانه ملی
نظر سنجی
چه موضوعاتی مورد پسند شما هست ؟












پشتیبانی
تبلیغات

شارژ آنلاین از فروشگاه سایت ما خریداری کنید راحت و با اطمینان کامل



حتما تا کنون متوجه شده اید که نمی توانید دو عنصر را به صورت هم عرض و هم سطح هم در صفحه وب نمایش دهید . علت این امر آنست که مرورگر ها به طور خودکار چینش هر عنصر را نسبت به عنصر قبلی تنظیم می کنند و بنابراین تمام عناصر زیر هم قرار می گیرند . برای ایجاد این چینشی که عناصر در آن هم سطح باشند در HTML دو راه وجود دارد یکی استفاده از جدول یا همان table و دیگری استفاده از div. در این مطلب نحوه استفاده از جدول را بیان می کنیم و در مطلب بعدی سعی می شود نحوه استفاده از div مطرح گردد .
برای ایجاد جدول در صفحه وب باید از تگ table استفاده کنیم . تگ باز table شروع یک جدول  و تگ بسته table پایان یک جدول را مشخص می کند ولی تا وقتی که سطر ها و ستون ها را ایجاد نکنید هیچ نمایی از جدول را ایجاد نمی کند .
برای ایجاد هر سطر در جدول از تگ tr استفاده می کنیم . هر تگ باز و بسته tr نشاندهنده یک سطر از جدول است سطری که در ابتدا فاقد هرگونه سلولی می باشد . برای ایجاد سلول (خانه) و نه ستون در داخل هر سط می بایست از تگ td استفاده نمود . چرا می گوئیم سلول و نه ستون ؟ بدین خاطر که همانطور که بعدا مشاهده خواهید کرد این امکان وجود دارد که سطر ها به تعداد نامساوی سلول داشته باشند حال آنکه مفهوم ستون در جدول یک قسمت بندی عمودی است که در تمام سطرها ظاهر شده باشد ولی تگ td که شما در یک سطر بکار می برید ، فقط روی همان سطر اثر می گذارد .
در داخل تگ td متن و محتویاتی که می خواهیم در خانه های جدول نمایش یابد را قرار می دهیم . در داخل تگ td تقریبا تمامی تگهایی که تا به حال دیدیم قابل استفاده است . به این نکته توجه کنید که هر آنچه که قرار است در جدول نمایش دهید باید داخل تگ های td نوشته شود و نه تگ های tr و یا بین تگ table و tr .
و ام نحوه نوشتن تگ های table و محتویات آن :
 

<table>
<tr>
<td>
HTML
</td>
<td>
PHP
</td>
<td>
jQuery
</td>
</tr>
<tr>
<td>
JavaScript
</td>
<td>
CSS
</td>
<td>
MySQL
</td>
</tr>
<tr>
<td>
ASP.NET
</td>
<td>
C#
</td>
<td>
SQL Server
</td>
</tr>
<table>

همانطور که می بینید خواندن کد فوق کمی مشکل است  چرا که همه عناصر هم سطح هم آمده اند . هنگامی که جدول بزرگ شود و عناصری غیر از متن معمولی را نیز شامل شود کار از این هم سخت تر می شود . اکیدا توصیه می شود که کد ها را دندانه دار بنویسید یعنی عنصر فرزند باید با کمی تو رفتگی نسبت به عنصر پدر نوشته شود . در این مطلب چون از ویرایشگرهای تحت وب استفاده شده این کار با مشکل مواجه شده است . نتیجه اجرای کد فوق را در زیر می بینید :
 

 

HTML PHP jQuery
JavaScript CSS MySQL
ASP.NET C# SQL Server

 

همانگونه که می بینید این جدول فاقد هر گونه مرز و یا اصطلاحا border است . البته مرز وجود دارد ولی به خاطر اینکه پهنای پیش فرض آن 0 است دیده نمی شود می توانید با انجام عمل Drag و انتخاب جدول متوجه مرزبندی این جدول شوید . این تکنیک معمولا هنگامی بکار می رود که بخواهیم چینش صفحه را به نوعی منظم کنیم که کاربر متوجه نشود ما از جدول استفاده کرده ایم و یا هدف نشان دادن جدول نباشد . برای ایجاد border می توانید از خصیصه border در تگ table استفاده کنید . این خصیصه مقداری عددی را بر حسب پیکسل گرفته و پهنای مرز جدول را با آن مقدار تنظیم می کند . البته این خصیصه در مرورگر هایی مانند Google Chrome درست کار نمی کند در این مرورگر باید پهنا ، نوع و رنگ مرز را برای هر سلول دقیقا تعریف کنید در مثال زیر همان جدول بالا مشاهده می شود که تنها برای سلول css مرز تعریف شده است .

<table>
<tr>
<td>
HTML
</td>
<td>
PHP
</td>
<td>
jQuery
</td>
</tr>
<tr>
<td>
JavaScript
</td>
<td style="border-width:1px;border-style:solid;border-color:black">
CSS
</td>
<td>
MySQL
</td>
</tr>
<tr>
<td>
ASP.NET
</td>
<td>
C#
</td>
<td>
SQL Server
</td>
</tr>
<table>

نتیجه اجرای کد به شکل زیر است :
HTML PHP jQuery
JavaScript CSS MySQL
ASP.NET C# SQL Server

 

در کد بالا border-width پهنای border و border-style نوع border (که در اینجا solid به معنای خط پیوسته است) و border-color رنگ border را مشخص می کنند . اگر بخواهید جدول همانند جدول های نرم افزار MS Word که در ذهن شما هستند به نظر برسد باید این خصیصه style را در تمام تگ های td و tr و همچنین تگ table قرار دهید تا تمامی خطوط جدول نمایان شوند . البته برای راحتی کار و همچنین جهت رعایت نکات فنی هیچ گاه style را در تمامی سطرها و ستون ها قرار نمی دهیم مگر در موارد خاص . پس چه کار باید انجام دهیم ؟ راه درست اینست که یک کلاس css تعریف کنید و تمامی سطرها و سلول ها را عضو آن کلاس کنید . می توانید برای یافتن چگونگی انجام این کار بخش css از همین سایت را مطالعه کنید و یا مثالی که در پائین همین صفحه آورده شده را خوب بررسی کنید .
از موارد دیگری که در خصیصه style تگ table قابل استفاده است width و height هستند .
تگ table این امکان را می دهد که چینش افق و عمودی هر سطر و یا سلول را به صورت مستقل و جداگانه تعیین کنیم . برای این کار می توانیم در هر سطر و یا ستون خصیصه های align و valign را بکار برد . اولی مربوط به چینش افقی و دومی مربوط به چینش عمودی است . توجه داشته باشید که اگر خصیصه align را در تگ table بنویسید خود جدول در وسط صفحه قرار می گیرد و نه محتویات آن .

 

در تگ table دو خصوصیت دیگر هم وجود دارد  :
- خصیصه cellspacing : فاصله بین سلول ها را تنظیم می کند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
- خصیصه cellpadding : حاشیه ای را از 4 طرف در داخل هر سلول ایجاد می کند . توجه کنید که align و valign بعد از اعمال cellpadding بر روی سلول اعمال می شوند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
 

 

دو خصیصه مهم دیگری که در تگ td بکار می روند به شرح زیر هستند :
1- خصیصه colspan : این خصیصه یک مقدار عددی می گیرد و مشخص کننده تعداد ستونهایی است که باید توسط این سلول پوشش داده شوند . به عنوان مثال اگر مقدار این خصیصه برابر با 3 باشد این سلول به اندازه پهنای 3 سلول عادی فضا اشغال می کند . توجه کنید که این خصیصه حالتی شبیه به merge cell را پیاده سازی می کند ولی در واقع هیچ گونه merge رخ نداده است .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
 
2- خصیصه rowspan : این خصیصه همانند خصیصه colspan عمل می کند با این تفاوت که در مورد سطرها عمل می کند .یعنی مثلا اگر سلولی دارای rowspan برابر با 2 باشد این سلول در دوسطر حضور خواهد داشت . برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
 
این مثال شامل دو عکس می باشد . یکی عکس کد و دیگری عکس اجرای کد به همراه توضیح است .
table-html-code

 

table

درباره : پی دی اف آموزشی , دانلود مجموعه کتابهای کامپیوتر pdf , آموزش HTML - ایجاد جدول با استفاده از تگ table ,
امتیاز : نتیجه : 0 امتیاز توسط 0 نفر مجموع امتیاز : 0

برچسب ها : آموزش HTML - ایجاد جدول با استفاده از تگ table ,
بازدید : 141
[ 15 / 05 / 1392 ] [ 15 / 05 / 1392 ] [ ]
.: Weblog Themes By goldtem.rozblog.com :.

::

تبلیغات

X بستن تبلیغات

موضوعات
تازه های سایت
اخبار روز جهان
شهدای استانها فرماندهان ، وصیتنامه ، خاطرات ، آثار شهدا
نرم افزار های کاربردی
مستند
دانلود فیلمها و سریالهای ایرانی
انمیشین
فرهنگ جبهه
عملیات
شناسایی ها
نیروهای دشمن
نیروهای دشمن 2
شهدای جهاد سازندگی
آلبومها
برنامه رادیویی
خاطرات انقلاب
وطن
راهیان نور
موسیقی فیلم
سرود
موسیقی بی‌ کلام
فرزند شهید
صدای شهدا
شهید سید اهل قلم آوینی
مارش
مداحی
ايثارگران
خانواده شهدا
اولين هاي شهيدان دفاع مقدس
نوای جبهه
مطالب مفید فرهنگی ، هنری ، اینترنتی و ...
مذهبی
مجموعه پوسترهای شهدای انقلاب اسلامی و دفاع مقدس
فاتحان قله‌های جاسوسان ( شهدای صابرین )
محمد ابراهیم همت
ادعیه و مناجات
ادیه و زیارت
دانلود کتب اسلامی
پخش زنده شبکه های تلویزیونی - سراسری
دانلود تمام آثار شهید مطهری
صرفا جهت اطلاع !!!!
جلوه های ویژه
پی دی اف آموزشی
دوره آموزشي زبان فارسي
کلیپ های با کیفیت دفاع مقدس (۱)
نرم افزارهای موبایل
گنجینه اذان
والپیپرهای اسلامی
والپیپر معمولی
بخش سیستم عامل
بازی
کلیپ
شهید حاج احمد کاظمی
دانلود مجموعه کتابهای کامپیوتر pdf
اس ام اس
اصول و فروع دین
طنز و کاریکاتور
فول آلبوم های مجاز
دیگر رسانه ها
جستجو


آرشيو مطالب
آمار سایت
بازديدهاي امروز : 1,588 نفر
بازديدهاي ديروز : 1,588 نفر
كل بازديدها : 2,779,822 نفر
بازدید این ماه : 22,339 نفر
بازدید ماه قبل : 22,339 نفر
کل نظرات : 6 عدد
كل مطالب : 4779 عدد
افراد آنلاین : 4 نفر
آروین گلشنی