advertise laitec sharif univercity تبلیغات در سایت سورس کد تبلیغات در سایت سورس کد
دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

دانلود برنامه آزمون تستی در مالتی مدیا بیلدر MMb

3000 تومان
دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

دانلود پروژه مهندسی نرم افزار ، سیستم داروخانه

3000 تومان
دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

دانلود سورس n وزیر با جست وجوی ممنوع در سی شارپ #C

3000 تومان
دانلود مجموعه 70 پروژه مفید و کاربردی سی شارپ #C

دانلود مجموعه 70 پروژه مفید و کاربردی سی شارپ #C

9500 تومان
سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

سورس پروژه دفترچه تلفن ساده در سی شارپ #c و بانک Access

3000 تومان

ایجاد جدول در HTML

جدولها روشی برای طرح بندی و مرتب کردن اطلاعات صفحه وب برای نمایش میباشند، که از سطرها و ستونهایی برای قرارگیری داده ها استفاده میکنند و با استفاده از تگهای table ، tr و td ساخته میشوند
ایجاد جدول در HTML

جداول HTML به عنوان یک روش برای تنظیم و مرتب کردن اطلاعات در یک صفحه وب استفاده میشوند. جدولها را میتوان برای ایجاد  طرح بندی کل صفحه وب استفاده کرد، که در حال حاضر چون CSS بطور گسترده پشتیبانی میشود و میتواند کارها را با کد کمتر انجام دهد ، خیلی توصیه نمیشوند.

جدولها از تعداد نامحدودی از سطرها ساخته شده اند که هر سطر به همان تعداد سلول شکسه شده اند تا ستونها را تولید کنند. متن ها، تصاویر و تمام عناصر دیگر HTML میتوانند در داخل هر سلول قرار گیرند، اما بطور مستقیم نمیتوان آنها را در ردیفها جای داد.

تگ اساسی باز و بسته شدن جدول "table" میباشد. تگهای "tr" هر سطر جدول را شروع و تمام میکند و تگهای "td" برای داده های جدول استفاده میشود و سلول ها را شروع و تمام میکند.

هنگامیکه ما از این سه برچسب با هم استفاده میکنیم ، اولین جدولمان را خواهیم داشت. ( در تمامی مثالها به جای() از علامتهای <> استفاده کنید)

(table)
 
(tr)
    (td)
      این اولین جدول ما میباشد
   
(/td)
  (/tr)
(/table)

 

این مثال شامل جدولی با یک خانه ( یک سطر تنها) است.

پس... حالا چه نکته ای در جدول ها مهم است؟ داده بیشتر! برای گنجاندن داده بیشتر ما ابتدا باید سطر و ستونهای بیشتری اضافه کنیم تا بتوانیم آن داده ها را سازماندهی کنیم. همچنین، ما میتوانیم از تگهای "th" برای ایجاد سلول "عنوان جدول" در جدول استفاده کنیم.

(table)
 
(tr)
    (th)Question:(/th)
    (th)Answer:(/th)
  (/tr)
  (tr)
    (td)What do you get when you cross a snake and a kangaroo?(/td)
    (td)A jump rope!(/td)
  (/tr)
  (tr)
    (td)What did one plate say to the other plate?(/td)
    (td)Lunch is on me!(/td)
  (/tr)
(/table) 

 

 حالا جدولها باید بیشتر احساس شوند، اما صبر کنید این همچنان ادامه دارد!

♦ Rowspan و colspan ( ادغام سطرها و ادغام ستونها )

حالا ما به قسمت گیج کننده میرسیم. آیا به یاد دارید قبلا ذکر کردیم که هر ردیف در جدول باید به همان تعداد از سلولها شکسته شود؟ اگر شما بخواهید که یک ردیف ، دو ستون داشته باشد و سطر بعدی فقط یک سلول داشته باشد؟ از "colspan" میتوان برای ترکیب چند ستون و تولید این اثر استفاده کرد، "rowspan" میتواند دو سطر، یا بخشی از دو سطر را به یک سلول بزرگ ،ترکیب کند . 

میتوانید مثال زیر را اجرا کنید و نتیجه را ببینید تا برای شما بیشتر قابل درک باشد:

(table) (tr)
  (th)Column 1(/th)
  (th)Column 2(/th)
  (th)Column 3(/th)
(/tr) (tr)
  (td rowspan="2")Rowspan="2"(/td)
  (td)1st Row, 2nd Cell(/td)
  (td)1st Row, 3rd Cell(/td)
(/tr) (tr)
  (td colspan="2")2nd Row, 2nd & 3rd Cells (Colspan="2")(/td)
(/tr) (/table)         

 

♦ Table manners ( مسلک جدول )

اگر یکی از سلولهای جدول شما خالی است و هیچ داده ای برای گنجاندن در آن ندارید ، مرورگر شما ممکن است باعث شود سلول شما خنده دار به نظر برسد. شما میتوانید با قرار دادن یک فضای HTML در این سلول ، این مشکل را برطرف سازید. این فضا، ";nbsp&" میباشد.

شما میتوانید اندازه حاشیه اطراف جدولتان را افزایش یا کاهش دهید، حتی آنرا نقطه چین کنید یا آن را ناپدید کنید. صفت "border" داخل تگ باز جدول تعریف میشود. مقدار صفر، برای مثال، ("table border="0) حاشیه را ناپدید میکند، در حالیکه مقدار 5 ،  ("table border="5) حاشیه را خیلی ضخیم میکند.

"cellpadding" ( حاشیه خالی سلول ) میتواند فضای خالی بیشتری داخل هر سلول ایجاد کند. این هم داخل برچسب آغازی جدول تعریف میشود: ("table cellpadding="5).

"cellspacing" فضایی را داخل حاشیه اطراف جدول و بین هر سلول اضافه میکند، و در تگ آغازی باز کننده جدول تعریف میشود:  ("table cellspacing="5).

 

 



1
نظرات
  • user avatar محمد جواد:
    ۲۱:۵۸:۰۲ __ ۱۳۹۴/۰۸/۲۱

    اگر این قسمت رو بلد نباشیم،اشکالی که پیدا نمیکنه؟

نظر خود را ارسال کنید



نام:
ایمیل:
دیدگاه:
captcha
کد امنیتی :


advertise
اموزش تعریف جدول در اچ تی ام الآموزش جداول HTMLآشنایی با جداول در htmlhtml tablesچگونگی ایجاد جدول در htmlجدول در اچ تی ام الچگونگی ایجاد جدول با htmlتبلیغات ارزان سایت آموزش برنامه نویسیتبلیغات مخصوص طراحان وب سایتتبلیغات در سایت برنامه نویسیتبلیغات اینترنتی برای برنامه نویساندر آغوش مینیمالیسممنوی همبرگر با سه خط افقی که روی یکدیگر قرار گرفته اند نشانه چیست؟ سوئیچ به یک ستون واحدتبدیل متن ساده به وبلاگ و سایت های پویا با React.jsکتابخانه sass برای استفاده آسان تر از آنکتابخانه سطح بالا برای اتوماتیک سازی اعمال مرورگر لیست برچسب ها
تمامی حقوق این سایت اعم از محتوی ، تصاویر ، قالب و ... متعلق به گروه مهندسی وب سایت سورس کد می باشد.
SourceCodes.ir ، افقی روشن برای برنامه نویسان ، از مبتدی تا حرفه ای

سفارش پروژه در سورس کد

پیشنهادات ویژه سورس کد

پکیج ویژه پروژه پایانی رشته کامپیوتر دانلود مجموعه 70 پروژه کاربردی سی شارپ وب سایت فروشگاه با php