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

و

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

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

در این قسمت می خواهم که چگونگی ساخت جداول در اچ تی ام ال به همراه چندین صفت مهم را توضیح دهم. خب برای ساخت یک جدول در کل ما نیاز به چهار تگ اصلی داریم که به ترتیب، 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 به اندازه دو سلول فضا اشغال کرده است.

نویسنده : ارسطو عباسی

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

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

#آموزش_قدم_به_قدم_html #آموزش_تگ_ها_در_html #آموزش_html #جداول_در_html #آموزش_گام_به_گام_html #آموزش_مقدماتی_html_و_css #استفاده_از_تگ_های_html #آموزش_مقدماتی_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

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

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

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