درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
ارسطو  عباسی
امتیاز: 25051
رتبه:26
60
85
8
229
ارسطو هستم، نویسنده، وبلاگ‌نویس و توسعه‌دهنده وبسایت: Arastoo.net پروفایل کاربر

آموزش گام به گام HTML قسمت یازدهم: جداول در HTML

تاریخ 33 ماه قبل
نظرات 0
بازدیدها 222
در این قسمت می خواهم که چگونگی ساخت جداول در اچ تی ام ال به همراه چندین صفت مهم را توضیح دهم. خب برای ساخت یک جدول در کل ما نیاز به چهار تگ اصلی داریم که به ترتیب، table، tr، th و td هستند. شیوه کاری این تگ ها به صورت زیر می باشد:
ساخت بدنه کلی جدول با تگ table
ساخت ردیف های جدول با تگ tr
ساخت عناوین جدول با تگ th
ساخت مقادیر هر عنوان با تگ td
<table>
  <tr>
<th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
هر جدولی که ساخته شود دارای یک یا چند عنوان و برای هر عنوان چند مقدار در نظر گرفته می شود، در مثال بالا یک ردیف با استفاده از تگ tr و با استفاده از تگ Th سه عنوان نام، نام خانوادگی و سن قرار دادیم در ردیف های بعدی با استفاده از تگ td برای هر یک از عنوان ها یک مقدار در نظر گرفته ایم. به صورت پیش فرض در هر ردیف اولین مقدار زیر اولین عنوان قرار می گیرد. و در این روند تا انتها ادامه خواهد داشت. البته می توان این روند را نیز تغییر داد که در ادامه بحث خواهد شد.
چند استایل زیبا برای جداول:
به صورت کلی هر جدولی باید دارای حاشیه باشد، برای اضافه کردن حاشیه کافی است که در قسمت سی اس اس فایل کدهای زیر را قرار دهید:
table, td, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
شاید بخواهید که مکان نوشته های مربوط به عناوین و مقادیر را تغییر دهید برای این کار در قسمت سی اس اس فایل کدهای زیر را قرار دهید:
th, td {
    text-align: left;
}
برای آنکه حاشیه ها به نوشته هایتان فاصله داخلی بگیرد می توانید در قسمت سی اس اس فایل کدهای زیر را قرار دهید.
th, td
{
	padding: 10px 10px 10px 10px;
}
Padding برای تعریف فاصله داخلی اجزا استفاده می شود، مقادیر این استایل به ترتیب بالا، چپ، پایین و راست می باشد.
یکی دیگر از تگ های مهم اچ تی ام ال تگ Caption می باشد، این تگ در تگ table باعث می شود که یک نام به جدول اختصاص داده شود، این نام معمولا روی جدول طراحی شده قرار می گیرد، مثال زیر را اجرا کنید.
 <!DOCTYPE HTML>
<HTML>
	<BODY>
		<style>
table, tr, td, th {
    border: 1px solid black;
         border-collapse:collapse;
}
th, td
{
	padding: 10px 10px 10px 10px;
	text-align:center;
}
		</style>
<table>
<caption>ITPRO Family</caption>
<tr>
	<th>Name</th>
	<th>Family</th>
	</tr>
<tr>
	<td>Arastoo</td>
	<td>Abbasi</td>
</tr>
<tr>
<td>Mohammad</td>
<td>Nasiri</td>
</tr>
<tr>
<td>Hosain</td>
<td>Ahmadi</td>
</tr>
</table>
	</BODY>
</HTML>
در آخر دو صفت بسیار مهم از تگ های th, td وجود دارند، که می توانند خیلی کاربردی باشند، برای آنکه یک سلول بیش از اندازه خود چه در جهت ستونی یا ردیفی فضا اشغال کند باید در تگ td یا th آن سلول از دستورات زیر استفاده کنید:
در جهت ستونی:
<th colspan="2">Name</th>
در جهت ردیفی:
<th rowspan="2">Name</th>
مقدار 2 نشان می دهد که سلول Name به اندازه دو سلول فضا اشغال کرده است.

نویسنده : ارسطو عباسی
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

برچسب ها
ردیف عنوان
1 آموزش گام به گام HTML قسمت اول : معرفی HTML و آشنایی کلی
2 آموزش گام به گام HTML قسمت دوم : دستورات مقدماتی و معرفی ساختار
3 آموزش گام به گام HTML قسمت سوم : صفحات یا Attributes و نکات مربوطه
4 آموزش گام به گام HTML قسمت چهارم : عنوان بندی و تگ های جدید
5 آموزش گام به گام HTML قسمت پنجم : استایل و فرمت متن ها
6 آموزش گام به گام HTML قسمت ششم : نقل قول و درج توضیحات
7 آموزش گام به گام HTML قسمت هفتم : استفاده از رنگ ها در HTML
8 آموزش گام به گام HTML قسمت هشتم : CSS چیست و چگونه بصورت مقدماتی با آن کار کنیم ؟
9 آموزش گام به گام HTML قسمت نهم : لینک ها در HTML
10 آموزش گام به گام HTML قسمت دهم: تصاویر در HTML
11 آموزش گام به گام HTML قسمت یازدهم: جداول در HTML
12 آموزش گام به گام HTML قسمت دوازدهم: لیست ها در HTML
13 آموزش گام به گام HTML قسمت سیزدهم: بلاک و کلاس ها در HTML
14 آموزش گام به گام HTML قسمت چهاردهم: قاب بندی در HTML
15 آموزش گام به گام HTML قسمت پانزدهم: Head در HTML
16 آموزش گام به گام HTML قسمت هفدهم: چند قانون ساده در HTML
17 آموزش گام به گام HTML قسمت هجدهم: فرم ها در HTML
18 آموزش گام به گام HTML قسمت نوزدهم: کنترل ها و (اجزای فرم در HTML5)
19 آموزش گام به گام HTML قسمت بیستم: انواع ورودی ها در html
20 آموزش گام به گام HTML قسمت بیست و یک: خاصیت های تگ input در HTML
21 آموزش گام به گام HTML قسمت بیست و دوم: چندرسانه/ویدیو و صدا
22 آموزش گام به گام HTML قسمت بیست و سوم (پایانی) - مدیریت بهتر لایه های وب
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

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