آموزش طراحی سایت:قسمت ششم

آموزش Table در HTMLسلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت ششم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:آموزش Table در HTMLجدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.مثال:نمونه یک<table border="1"> <tbody> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> </tbody></table>ویژگی های colspan و rowspanاگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.مثال:نمونه سه<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>پس زمینه ی جدولمی توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.مثال:نمونه چهار<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.نمونه پنج<table border="1"> <tbody> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </tbody></table>طول و عرض جدولشما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.مثال:نمونه شش<p>Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2</p>شرح جدولبرچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.مثال آموزش طراحی سایت:نمونه هفت<table border="1" style="width:100%"> <caption>This is the caption</caption> <tbody> <tr> <td>row 1, column 1</td> <td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td> <td>row 2, columnn 2</td> </tr> </tbody></table>تیتر، بدنه و پاورقی جدولجدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(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 class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" 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>پایان بخش ششم آموزش طراحی سایت