آموزش طراحی سایت-قسمت 6
سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت ششم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:
تیتر، بدنه و پاورقی جدول
جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از
- < thead> - برای ایجاد یک تیتر مجزا
- < tbody>- برای نشان دادن بدنه ی اصلی جدول
- < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول
یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر مختلفی باشد، اما ظاهر شدن برچسب های و قبل از زیاد مهم نیست.
مثال:
نمونه هشت
<p>This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4</p>
شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.
مثال:
در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.
<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt;" dir="rtl"><span lang="FA"><span style="font-size: 12pt; color: #000000;"> <br></span></span></p><div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="bookMoreInfo">
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<span class="VisitCountHolder">
<span class="fa fa fa-eye"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>
</span>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<em class="fa fa-download"> </em>
<span id="BodyContent2_Lbl_dlcount">424</span>
</li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:
<span id="BodyContent2_Lbl_createdate">1394/07/27</span>
</li>
</ul>
</div>
</div><div id="BodyContent2_dlPDF">
<div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!--
.UserPassTable tr td {
text-align: right;
background-color: transparent !important;
color: #604e44;
}
.UserPassTable a {
color: #604e44 !important;
}
@media only screen and (max-width: 950px) {
.UserPassTable tr td {
display: block;
width: 100%;
padding-right: 5px;
}
.UserPassTable tr td::before, .UserPassTable tr td::after {
content: " " !important;
width: 0px;
}
table.UserPassTable td:nth-of-type(1)::before {
content: " " !important;
width: 0px;
}
.UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {
background-color: #239ead;
color: white;
}
.UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {
background-color: #f3f8fb;
color: black;
}
}
-->
</div></div></div><table style="width: 100%;" border="1">
<tbody><tr>
<td>
<table style="width: 100%;" border="1">
<tbody><tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">
<tbody><tr>
<td class="text-center">
<em class="fa fa-download fa-2x text-center"> </em>
</td>
<td class="text-center">
<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">
<span class="text-fa">دریافت این مقاله بصورت PDF</span>
</a>
<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">
<span class="text-fa">دریافت سورس کد مقاله</span>
</a>
</td>
</tr>
<tr>
<td colspan="2">
<br>
پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.
</td>
</tr>
<tr>
<td class="text-center">
<em class="fa fa-key fa-2x"> </em>
</td>
<td class="text-danger">tahlildadeh.com
یا
www.tahlildadeh.com
</td>
</tr>
</tbody></table>
<div class="ipShow">
</div>
پایان بخش ششم آموزش طراحی سایت