تبلیغات
برترین وبلاگ آموزش برنامه نویسی - جلسه چهارم آموزش html-
 
برترین وبلاگ آموزش برنامه نویسی
درباره وبلاگ


این وبلاگ با هدف بالا بردن سطح برنامه نویسی دانشجویان و کسانی که می خواهند برنامه نویسی را شروع کنند تهیه شده است و سعی خواهد شد تا به بهترین شکل ممکن به کار خود ادامه دهد.امیدوارم بتوانم شما را راهنمایی کنم.

مدیر وبلاگ : محمدرضا اسماعیلی
موضوعات
نظرسنجی
سطح تدریس در این وبلاگ چگونه است؟







آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
کار با جداول:

همونطور که از اسمش پیداست..برای نمایش برخی اطلاعات به صورت جدول از این المان(فارسی بخونید:eleman) استفاده میشه

مثلا شکل زیر رو ببینید:
 نام نام خانوادگی
 محمدرضاعلوی
علی عظیمی

که مسلما اینقدر بی روح و ساده نیست...

کد نویسی:

صفحه ای بسازید و بین دو تگ body این کد ها رو بنویسید:

<table>
  <tr>
    <td/>نام<td>
    <td/>نام خانوادگی<td> 
  <tr/>
  <tr>
    <td/>محمدرضا<td>
    <td/>علوی<td>
<tr/> 
<tr>
    <td/>علی<td>
    <td/>عظیمی<td> 
<tr/>
<table/>

تگ table برای معرفی جدول هست..یعنی به صفحه مرورگر میگید که یه جدول میخوام

هر جدول از تعدادی سطر و ستون تشکیل شده..مثلا جدول بالا از دو ستون و سه سطر تشکیل شده

داخل تگ table برای معذفی سطر باید از tr استفاده کنید..

بعد از سطر باید محتویات سطر یا به عبارت دیگه تعداد ستون ها رو با تگ td مشخص کنید..

کد بالا رو نگاه کنید..تقریبا همه چی مشخصه..

تمرین:

همین الان یه جدول برا خودتون بسازید..دارای دو ستون باشه..یکی نام و دیگری شماره تلفن...

بعد اطلاعات 5 نفر رو بهش اضافه کنید


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


                                                               
نامنام خانوادگینمره
محمدعلوی20
علیعظیمی18
جعفرقره تپه15

برای اینکار باید سطر اول جدول رو با تگ th پر کنید..کد زیر رو ببینید کافیه:

<table>
  <tr>
    <th>نام</th>
    <th>نام خانوادگی</th>
    <th>نمره</th>
  </tr>
  <tr>
    <td>محمد</td>
    <td>علوی</td>
    <td>20</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>عظیمی</td>
    <td>18</td>
  </tr>
  <tr>
    <td>دیوید</td>
    <td>بکهام</td>
    <td>15</td>
  </tr>
</table>

حالا یه ذره کار رو سخت تر میکنیم:

فرض کنید جدول شما نام و شماره تلفن رو میخواد..ولی اسم یه دونه ست..اما شماره تلفن دو تا ست...جدول زیر رو ببینید:


                           
NameTelephone
Bill Gates555 77 854555 77 855

برای این کار باید از کد زیر استفاده کنید:

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

col span در واقع تعداد رو مشخص میکنه..

حالا جدول زیر رو ببینید:

                       
First Name:Bill Gates
Telephone:555 77 854
555 77 855

و کد این جدول:

<table>
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>


بعصی مواقع اگر بخواید برا جدول یه عنوان انتخاب کنید..مثل تین:

                          
Monthly savings
MonthSavings
January$100

و کد این جدول:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

خوب...جداول رو خوب یاد بگیرید..چون برای طراحی وب خیلی به درد میخوره...

کد زیر رو هم جداگانه امتخان کنید..ببینید چیزی میتونید ازش بفهمید:


خیلی خوب..تا بعد





نوع مطلب :
برچسب ها :
لینک های مرتبط :

       نظرات
شانزدهم آبان 93
محمدرضا اسماعیلی
بیست و هفتم شهریور 96 08:00 ق.ظ
Howdy! I understand this is somewhat off-topic however I had to ask.
Does running a well-established website like yours require a lot of work?
I'm brand new to running a blog however I do write in my diary everyday.
I'd like to start a blog so I can share my experience and views online.
Please let me know if you have any ideas or tips for new aspiring bloggers.
Appreciate it!
چهاردهم مرداد 96 06:06 ق.ظ
Asking questions are in fact pleasant thing if you are not understanding anything entirely, however this article
offers pleasant understanding yet.
سیزدهم مرداد 96 01:51 ب.ظ
Hi, I do think this is an excellent website. I stumbledupon it ;) I am
going to come back yet again since I book marked it.
Money and freedom is the best way to change, may
you be rich and continue to guide others.
هشتم مرداد 96 03:29 ق.ظ
Hello, i think that i saw you visited my weblog so i came to “return the favor”.I'm trying to find things to
improve my site!I suppose its ok to use a few of your ideas!!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر