• نحوه ایجاد جدول css در html. ویژگی برچسب و

    سلام به خوانندگان عزیز وبلاگ اغلب در صفحات وب، علاوه بر متن و عکس، نمایش داده های مختلف در قالب جداول ضروری می شود. بله، این قابل درک است، یک جدول راحت ترین راه برای ارائه مقدار زیادی اطلاعات است. بنابراین این سوال پیش می آید چگونه جداول را در html جاسازی کنیم؟. در این مقاله به این سوال پاسخ می‌دهم و مثال‌های زیادی از جداول html مختلف ارائه می‌دهم.

    نحوه ایجاد جدول با استفاده از HTML

    جداول HTML در چهار مرحله ایجاد می شوند.

    1. در مرحله اول در کد html با استفاده از جفت برچسب زدن

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

    2. در مرحله دوم فرم می دهیم خطوطجداول با قرار دادن برچسب های جفت شده داخل

    . هر عنصر یک خط جداگانه ایجاد می کند:





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











    4. خب در مرحله آخر آن را داخل المنت ها قرار می دهیم و محتوای سلولی کد HTML برای درج جدول در یک صفحه وب چیزی شبیه به این است:











    ستون 1ستون 2ستون 3
    سلول 1-1سلول 1-2سلول 1-3
    سلول 2-1سلول 2-2سلول 2-3

    تنظیم دقیق نمایش حاشیه ها کمک خواهد کرد. با استفاده از می توانید ضخامت و رنگ قاب ها و همچنین نوع حاشیه ها را تغییر دهید.

    متنی که باید در داخل سلول ها قرار گیرد اختیاری است، اما اگر متن بزرگ باشد، می توان آن را با اعمال تگ به پاراگراف ها تقسیم کرد.

    اگر نیاز دارید متن درج شده را به نحوی استایل دهید، می توانید از .

    علاوه بر متن، می توانیم با استفاده از تگ، تصاویر را در سلول ها قرار دهیم :

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

    و
    ، و ردیف ها و سلول ها در آن درج می شوند.

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

    • فقط از تگ برای ایجاد جدول استفاده می شود ;
    • برچسب زدن
    • فقط می تواند داخل یک برچسب باشد
      ;
    • برچسب ها
    • ، هر محتوای برچسب دیگری نادیده گرفته شده توسط مرورگر؛
    • محتوای جدول (متن یا عکس) فقط می تواند در برچسب ها باشد
    • و فقط می تواند داخل یک برچسب باشد
      و ;
    • سلول های جدول باید حداقل مقداری محتوا داشته باشند، در غیر این صورت ممکن است مرورگر به هیچ وجه آنها را نمایش ندهد، اگر برخی از سلول ها باید خالی باشد، معمولاً یک فضای بدون شکست (HTML literal) در آن قرار می گیرد.
    • جدول به عناصر بلوک صفحه وب اشاره دارد.
    • اندازه جدول و سلول های آن به محتوا بستگی دارد، یعنی. میز در عرض و ارتفاع کشیده شده است تا همه چیز متناسب باشد.
    • یک فرورفتگی کوچک بین مرزهای سلول های جداگانه و بین مرز هر سلول و محتویات آن ایجاد می شود.
    • متن سلول های هدر (عنصر هفتم) به صورت پررنگ و در مرکز نمایش داده می شود.
    • حاشیه های اطراف جدول و سلول های آن به طور پیش فرض ترسیم نمی شوند.
    • سربرگ جدول

      بیایید با تگ جفت شروع کنیم

      , که به جدول عنوان می دهد. متن عنوان داخل این تگ قرار می گیرد که باید داخل تگ باشد . و مهم نیست که در کجای کد html جدول برای قرار دادن برچسب . علاوه بر این، استفاده از بیش از یک عنصر مجاز است در همان جدول، و باید بلافاصله بعد از تگ در کد html قرار گیرد
      ، مرورگر همچنان عنوان را در بالای جدول نمایش می دهد و آن را در مرکز قرار می دهد. اما معمولاً برچسب بلافاصله بعد از تگ افتتاحیه قرار می گیرد :









      این یک میز است
      سلول 1.1سلول 1.2
      سلول 2.1سلول 2.2

      نمایش دادن:

      بخش های جدول

      جدول html را می توان به طور منطقی به بخش - بخش تقسیم کرد. سه نوع بخش وجود دارد:

      • بخش هدر، که در آن سلول های هدر قرار می گیرند که سربرگ جدول را تشکیل می دهند.
      • بخش بدن، که در آن سلول هایی با داده های اصلی قرار دارند.
      • بخش تکمیل، که سلول هایی با کل داده ها در آن قرار می گیرند.

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

      .

      بخش بدنه با یک تگ جفت ایجاد می شود

      . یک جدول html می‌تواند شامل چندین بخش بدنه باشد که به شما امکان می‌دهد بلوک‌های ساختاری ایجاد کنید که سبک‌های طراحی یکنواخت را می‌توان روی آن اعمال کرد.

      بخش تکمیل توسط یک جفت تگ تشکیل می شود

      و در همان ظرف
      فقط یکی می تواند باشد.

      همه این تگ های جفت شده باید حاوی برچسب باشند

      ، که خطوط مربوط به بخش های مربوطه را تشکیل می دهد:




















      ستون 1ستون 2ستون 3
      سلول 1.1سلول 1.2سلول 1.3
      سلول 2.1سلول 2.2سلول 2.3
      نتیجه 1نتیجه 2نتیجه 3

      ادغام سلول های جدول

      باقی مانده است که در مورد مهمترین ویژگی جداول صحبت کنیم - ادغام سلول هااز ویژگی ها برای ترکیب چند سلول در یک سلول استفاده می شود. کلسپنو دهانه ردیفبرچسب ها

      و . ویژگی colspan تعداد سلول های ترکیب شده به صورت افقی و rowspan را به صورت عمودی تنظیم می کند:













      1.11.2-1.3
      2.12.22.3
      3.1-4.13.23.3
      4.24.3

      نتیجه مثال:

      1.1 1.2-1.3
      2.1 2.2 2.3
      3.1-4.1 3.2 3.3
      4.2 4.3

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

      جایگزین دو سلول می شود، بنابراین خط بعدی باید دو تگ داشته باشد ، یا همان طرح! اگر تعداد سلول ها در همه ردیف ها مطابقت نداشته باشد، سلول های اضافی خالی ظاهر می شوند.

      نمونه ای از کد html نادرست هنگام ادغام سلول ها:








      سلول 1.1سلول 1.2
      سلول 2.1سلول 2.2

      و نتیجه نمایش داده شده در مرورگر:

      آن ها اگر کد html را تجزیه و تحلیل کنید، متوجه خواهید شد که خط اول دارای سه سلول است که دو تای آنها با استفاده از ویژگی colspan ادغام شده اند و خط دوم فقط دو سلول اضافه شده است. بنابراین، سومین سلول خالی در ردیف دوم ظاهر می شود.

      ویژگی ها را تگ کنید

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

      . با ویژگی border که عرض حاشیه را بر حسب پیکسل تعیین می کند. به طور پیش فرض 0 است و بنابراین سلول ها به طور پیش فرض بدون حاشیه نمایش داده می شوند.

      علاوه بر مشخصه border، چندین ویژگی مهم دیگر نیز توسط تگ پشتیبانی می شود.

      . بیایید نگاهی به آنها بیندازیم.

      صفت تراز کردن- مجموعه ها هم ترازیجداول روی صفحه می تواند مقادیر چپ، مرکز، راست را بگیرد که تراز را به ترتیب به سمت چپ، مرکز و راست تنظیم می کند. پیش فرض باقی مانده است.

      صفت زمینه، که تصویر پس زمینه را تنظیم می کندبه میز آدرس فایل تصویر را به عنوان مقدار می گیرد.

      bgcolor- نصب می کند رنگ پس زمینهجداول می توان در ارتباط با ویژگی پس زمینه استفاده کرد.

      صفت رنگ لبهمجموعه ها رنگ قابجداول

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

      فاصله سلولی- مجموعه ها فاصله بین مرزهای سلول بیرونی.

      در این مورد صحبت کنید نحوه درج جدول در صفحه htmlمن تمام می کنم، فقط خلاصه می کنم:

      • از تگ ها برای درج جدول استفاده می شود
      - تعیین جدول، - اضافه کردن یک خط و ، بخش تکمیل و بخش بدنه ;
    • از ویژگی های برچسب برای ادغام سلول ها استفاده کنید
    • وکه برای ایجاد خطوط و جفت کردن تگ ها استفاده می شود، مسئول ایجاد سلول ( علاوه بر این، برچسب های بسته شدن ردیف ها و سلول ها ممکن است وجود نداشته باشد)

      بنابراین، با توجه به اینکه ما قبلاً می دانیم که چگونه یک جدول ساده HTML ایجاد کنیم، بیایید اطلاعات بالا را اعمال کنیم و یک جدول ساده ایجاد کنیم، همانطور که در نشان داده شده است. (شکل 1).

      ساده ترین جدول شکل 1

      کد جدول سادهکه در شکل 1 (بالا) نشان داده شده است.

      - قرار دادن یک سلول؛
    • جدول یک عنصر بلوک از یک صفحه وب است.
    • محتویات سلول ها می تواند نه تنها متن، بلکه تصاویر و جداول دیگر باشد.
    • یک جدول می تواند شامل سه نوع بخش باشد: بخش سرصفحه -
    • colspan و rowspan.

      تمام، در پست بعدی در مورد ابزارهای ناوبری در سایت html صحبت خواهم کرد. در به روز رسانی های وبلاگ من مشترک شوید تا این پست را از دست ندهید! همه، به زودی می بینمت!

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

      بیایید هر دو روش استفاده از جداول HTML را بررسی کنیم. اما ابتدا یاد می گیریم که چگونه جداول را به یک سند HTML اضافه کنیم و همچنین به امکاناتی که HTML برای کار با جداول ارائه می دهد نگاه می کنیم.

      ایجاد یک جدول پایه HTML

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

      و
      .

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

      و



















      1-سلول جدولجدول 2 سلولیجدول 3 سلولیجدول 4 سلولی
      جدول 5 سلولیجدول 6 سلولیسلول 7 جدولیجدول 8 سلولی
      جدول 9 سلولیجدول 10 سلولی11-جدول سلولیجدول 12 سلولی

      کد جدول پیچیده، به عنوان مثال در شکل 2












      ادغام ستون ها ویژگی " کلسپن" ویژگی الحاق رشته " دهانه ردیف"
      صفت " valign"بالا"
      صفت " valign" "پایین"

      جدول حاصل شکل 1 . زشت به نظر می رسد همه اینها به این دلیل است که از برچسب هایی که برای ایجاد ساده ترین جدول استفاده کردیم (

      , , و

      1) ویژگی برچسب

      "ارتفاع". لطفا توجه داشته باشید که برچسب هیچ ویژگی "width" (width) وجود ندارد، زیرا برچسب مسئول خط و بر این اساس برای ارتفاع است. و ستون ها قبلاً مسئول عرض هستند. اگر چه برچسب دارد ویژگی "height" است، اما عملاً دیگر در هیچ کجا استفاده نمی شود.

      ویژگی ها را تگ کنید

      ).

      3) ویژگی برچسب

      .
      تگ بسته شدن الزامی است.

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

      حالا بیایید سعی کنیم از تئوری استفاده کنیم و در عمل یک جدول ایجاد کنیم.

      ورزش:یک جدول از یک ردیف ایجاد کنید که در آن سه ستون وجود دارد.

      ) ممکن است ویژگی های مختلفی داشته باشد که باید مشخص شود: می تواند پس زمینه، حاشیه ها، اندازه ها و غیره باشد.

      حال بیایید به ویژگی هایی که برای تگ اعمال می شود نگاه کنیم.

      و
      . برای اینکه ببینیم جدول با اعمال روی تگ چگونه تغییر می کند ویژگی ها، کد جدول را کپی کرده و در یک سند متنی با پسوند html قرار دهید و آن را با مرورگر باز کنید، با اضافه کردن ویژگی ها به کد جدول و تازه کردن صفحه، خواهید دید که جدول شما در مرورگر چگونه به نظر می رسد.

      ویژگی های برچسب:

      1) ویژگی "border"، عرض قاب کل جدول را بر حسب پیکسل تنظیم می کند که به صورت زیر نوشته می شود:

      .

      2) ویژگی های "width" و "height" - این ویژگی عرض و ارتفاع توصیه شده جدول شما را تنظیم می کند، به این صورت نوشته شده است:

      3) ویژگی "bordercolor" - رنگ حاشیه کل جدول را به صورت زیر تنظیم می کند:

      .

      4) ویژگی "align" - جدول alignment، align=left - جدول به سمت چپ تراز می شود، align=right - به سمت راست، به صورت زیر نوشته می شود:

      5) ویژگی "bgcolor" - رنگ پس زمینه جدول را به صورت زیر تنظیم می کند:

      من فکر می کنم که صفات برای شما کافی است!

      اکنون ویژگی های برچسب را در نظر بگیرید:

      ویژگی ها را تگ کنید

      2) ویژگی برچسب

      "width"، ویژگی "height" (height) برچسب نه چون تگ مسئول سلول جدول و عرض آن است و خط مسئول ارتفاع (برچسب
      "کلسپن". مقدار این ویژگی نشان دهنده تعداد ستون هایی است که این سلول اشغال می کند. به عبارت دیگر، این ویژگی به شما امکان می دهد چندین سلول مجاور عمودی را در یک ادغام کنید.

      4) ویژگی برچسب

      طول ردیف مقدار این ویژگی نشان دهنده تعداد ردیف هایی است که این سلول اشغال می کند. بر این اساس، این ویژگی به شما امکان می دهد چندین سلول را به صورت افقی در یک سلول ادغام کنید.

      5) ویژگی برچسب

      "تراز کردن". این ویژگی به شما اجازه می دهد تا عناصر درون یک سلول را به صورت افقی تراز کنید. دارای سه مقدار است: "چپ" (در سمت چپ سلول)، "مرکز" (در مرکز)، "راست" (در سمت راست سلول). اگر چیزی مشخص نشده باشد، تراز باقی خواهد ماند.

      6) ویژگی برچسب

      "والین". این ویژگی به شما اجازه می دهد تا عناصر درون یک سلول را به صورت عمودی تراز کنید. و همچنین "تراز" فقط سه مقدار دارد: "بالا" (بالا)، "وسط" (وسط)، "پایین" (پایین). مقدار پیش فرض "middle" در وسط است.

      بیایید آنچه را که تازه آموخته ایم به کار ببریم.

      شکل 2 جدول پیچیده ما را نشان می دهد.

      جدول پیچیده شکل 2

      این اساساً تنها چیزی است که باید در مورد جداول HTML بدانید و از آنها با موفقیت استفاده کنید.

      ایجاد جدول html در ویرایشگر جوملا.

      برای ایجاد جدول در جوملا می توانید از ویرایشگر TinyMce که به طور پیش فرض در جوملا است استفاده کنید.

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

      دانلود فایل ها:

      دوره ویدیویی HTML از Evgeny Popov

      دوره ویدیویی رایگان شامل 33 درس HTML است.

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

      09.11.2015


      سلام به همه!
      ما به یادگیری اصول اولیه HTML ادامه می دهیم. در این درس با مثال می گویم و نشان می دهم نحوه ساخت جدول در html. و همچنین در نظر بگیرید که چگونه می توانید رنگ سلول های جدول را تنظیم کنید، چگونه میز را در مرکز قرار دهید، یاد بگیرید چگونه یک حاشیه جدول بسازید و غیره.
      جداول HTML اغلب در HTML برای فهرست کردن برخی اطلاعات استفاده می شود. قبلاً از جداول برای ایجاد چارچوب صفحات وب استفاده می شد:

      ... اما این موضوع مربوط به گذشته است، زیرا راه‌های بهتری برای قالب‌بندی یک سایت با . من اغلب از یک جدول در وبلاگ یا وب سایت خود استفاده می کنم، به عنوان مثال، در .

      فکر می کنم متوجه شده اید که چرا باید نحوه ایجاد جدول را یاد بگیرید.

      برچسب های اصلی یک جدول کدامند؟

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

      ○ برچسب تیآر

      داخل ظرف

      ……
      ردیف ها قرار می گیرند:

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

      ردیف -1 / ستون 1 ستون 2 ستون 3

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

      ردیف -1 / ستون 1 ستون 2 ستون 3
      ردیف -2 / ستون 1 ستون 2 ستون 3
      ردیف -3 / ستون 1 ستون 2 ستون 3

      تا به حال همه چیز برای شما روشن است؟ اگر متوجه نشدی دستت را بلند کن! بله، متوجه شدم، بیایید ادامه دهیم.

      حال ویژگی های جدول را در نظر بگیرید.

      *ویژگی های

      حاشیه های جدول در HTML

      برای قابل مشاهده کردن جدول، برای برچسب

      کاربردی صفت "مرز» .

      اگر مقدار ویژگی « مرز» "0"، اگر به تگ اختصاص داده نشود، مرز قابل مشاهده نخواهد بود

      صفت مرز، حاشیه در جدول نیز قابل مشاهده نخواهد بود.

      حاشیه های جدول در HTML - وب سایت

      ردیف -1 / ستون 1 ستون 2 ستون 3

      نتیجه:

      سعی کنید مقدار مشخصه را تغییر دهید مرزبر "10" .

      نحوه ادغام سلول ها در جدول

      از ویژگی ها برای ادغام سلول ها در جدول استفاده می شود "کلسپن"و "span" به تگ < td> .

      • colspan - ادغام سلول ها به صورت افقی.
      • rowspan - ادغام سلول ها به صورت عمودی.

      در مقادیر، مشخص کنید که چند سلول ادغام شوند.

      ردیف 1 ستون 1
      ردیف 2 ستون 1 ردیف 2 ستون 2

      نتیجه:

      ردیف 1 ستون 1 ردیف 1 ستون 2
      ردیف 2 ستون 1

      نتیجه:

      مثال پیچیده تر:

      جداول در HTML - سایت

      ردیف -1 / ستون 1 ستون 2 ستون 3
      ردیف -2 / ستون 1 ستون 2 ستون 3 ستون 4

      نتیجه:

      نحوه افزایش فاصله بین سلول های جدول

      برای افزایش فاصله بین متن و حاشیه سلول، ویژگی را بنویسید "بالشتک سلولی"به برچسب

      در مقادیر ویژگی "cellpadding" فاصله تورفتگی را مشخص کنید

      ردیف 1 ستون 1 ستون 2

      نتیجه:

      برای افزایش فاصله بین سلول ها در جدول، از ویژگی استفاده کنید فاصله سلولیبه برچسب

      در مقادیر ویژگی فاصله سلولیفاصله بین سلول ها را مشخص کنید

      ردیف 1 ستون 1 ستون 2

      نتیجه:

      چگونه یک پس زمینه جدول HTML بسازیم

      برای ایجاد پس‌زمینه جدول HTML از تگ k استفاده کنید

      و

      این صفات:

      • BGCOLOR - رنگ پس زمینه برای کل جدول یا برای هر سلول به صورت جداگانه. رنگ با کد یا کلمه مشخص می شود.
      • پس زمینه - پس زمینه در جدول با یک تصویر پر شده است.
      جداول در HTML - سایت
      ردیف -1 / ستون 1 ستون 2 ستون 3
      ردیف -2 / ستون 1 ستون 2 ستون 3 ستون 4

      نتیجه:

      نحوه درج یک تصویر در جدول HTML

      برای درج یک تصویر در جدول HTML، بین تگ

      درج برچسب .

      ردیف 1 سلول 1 سلول 2

      نتیجه:

      مقادیر بر حسب پیکسل (px) یا درصد (%) مشخص می شوند.

      تراز کردن محتوا در جدول HTML

      برای تراز کردن محتوا در یک جدول HTML، از برچسب to استفاده کنید

      صفت تراز کردنو "والین" :

      تراز کردن- تراز افقی مطالب در جدول.
      ارزش های:

      • ترک کرد - محتوا را به سمت چپ فشار دهید (پیش فرض);
      • مرکز تنظیم در مرکز؛
      • درست - محتوا را به سمت راست فشار دهید

      معتبر- تراز عمودی مطالب در جدول.
      ارزش های:

      • بالا محتویات را به بالا فشار دهید؛
      • پایین محتویات را به پایین فشار دهید؛
      • وسط محتوا را در وسط قرار دهید
      متن
      سلول پیش فرض محتوا به صورت افقی به سمت راست، به صورت عمودی - به پایین فشار داده شده است
      محتوا را به صورت افقی به سمت چپ، عمودی تراز کنید - آن را به بالا فشار دهید محتوا را به صورت افقی در مرکز، به صورت عمودی تراز کنید - وسط را فشار دهید

      نتیجه:

      نحوه وسط جدول html

      برای تراز کردن میز در مرکز، باید میز را با یک برچسب بپیچید

      :

      کد جدول

      ردیف -1 / ستون 1 ستون 2 ستون 3

      برچسب های اضافی و اصلی برای جدول

      جدول برای وب سایت
      عنوان 1 عنوان 2
      1 2

      نتیجه:

      بنابراین کار با جداول تمام شد. اکنون می توانید جدولی با هر پیچیدگی به تنهایی ایجاد کنید. این درس را بررسی کنید. سعی کنید هر جدولی را خودتان بسازید.
      من مشتاقانه منتظر دیدار شما در درس بعدی هستم. در به روز رسانی های وبلاگ من مشترک شوید.

      پست قبلی
      پست بعدی

      با استفاده از ویژگی های COLSPAN، ROWSPAN، می توانید چندین سلول مجاور یک ستون یا ردیف را در یک سلول بزرگ ترکیب کنید.

      ویژگی COLSPAN را تگ کنید , به شما اجازه می دهد تا سلول های چند ستون را در یک ردیف ادغام کنید.

      ویژگی ROWSPAN - سلول های چند ردیف در یک ستون واحد.

      تعداد مشخص شده در این ویژگی ها نشان دهنده تعداد سلول هایی است که ادغام می شوند.

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

      مثال:

      کد HTML:


      1111 22222 33333 44444 55555 66666 77777 88888 99999

      نمایش در مرورگر:


      1111 22222 33333
      44444 55555 66666
      77777 88888
      99999

      بهبود ظاهر جدول صفحه html

      ویژگی CELLSPACING به شما این امکان را می دهد که اندازه نوار فضای سفیدی را که میز را از بیرون احاطه کرده است تعیین کنید. به طور پیش فرض، مرورگر سلول های جدول را با یک نوار 2 پیکسلی جدا می کند.

      ویژگی CELLPADDING اندازه نوارهای فضای سفید داخل سلول را مشخص می کند و محتویات آن را از مرزهای بیرونی جدا می کند. به طور پیش فرض، این مقدار 1 پیکسل است.

      برای اینکه تصاویر گرافیکی قرار داده شده در سلول های جدول مجاور مانند یک کل واحد به نظر برسند، باید ویژگی های CELLSPACING، CELLPADDING را روی مقادیر صفر تنظیم کنید.

      نمایش حاشیه های جدول صفحه html

      اگر مقدار مشخصه BORDER تگ

      غیر صفر، مرورگر جدول را قاب می کند و ردیف ها و ستون های مجاور جدول را مشخص می کند. با استفاده از ویژگی های FRAME, RULES می توانید مشخص کنید که کدام قسمت از قاب های جدول نشان داده شود.

      ویژگی FRAME برای تعریف قطعاتی از طرح بیرونی جدول استفاده می شود.

      ویژگی RULES مجموعه خطوط جداکننده داخلی را مشخص می کند.

      در زیر مقادیر معتبر برای این ویژگی ها آمده است.

      مقدار FRAME نتیجه void همه خطوط در بالای خط جدول در بالای جدول زیر خط زیر جدول rhs خط به سمت راست جدول lhs خط به چپ جدول hsides خطوط بالا و پایین جدول در مقابل خطوط سمت چپ و راست حاشیه جدول وجود ندارد همه خطوط موجود (پیش‌فرض) قوانین هیچکدام همه خطوط از دست رفته cols خطوط بین ستونها ردیف خطوط بین گروههای ردیف خطوط بین گروههای ستونها و سطرها همه همه خطوط موجود (پیش فرض)

      مثال:

      ردیف دوم یک ستون است (فقط بخشی از آن توسط ستون دوم ردیف اول پنهان می شود):

      در نهایت، ردیف سوم یک ستون واحد است که شامل سه ستون است:

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

      میزهای تو در تو

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

      بنابراین ما این کد را داریم.

      کد HTML:


      111 111 111 111 111 111

      نمایش در مرورگر:


      111 111 111
      111 111 111

      بسته بندی کلمات در سلول های جدول صفحه html

      به‌طور پیش‌فرض، مرورگر به‌طور خودکار واژه‌بندی متن را در سلول جدول انجام می‌دهد. ویژگی NOWRAP به اجبار تابع wrap کلمه در جدول را خاموش می کند و متن را در یک خط نمایش می دهد. بنابراین، توصیه می شود این ویژگی در رابطه با سلول های جدول حاوی متن کوتاه اعمال شود، زیرا. در غیر این صورت، از پنجره مرورگر خارج می شود. توجه داشته باشید که این ویژگی روی متن سلولی که با برچسب ها قالب بندی شده است، تاثیری ندارد.

      ,
      .

      جداول تو در تو صفحه html

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

      شما همچنین نباید از سرمایه گذاری سوء استفاده کنید، زیرا در این حالت، بارگذاری صفحه توسط مرورگر به میزان قابل توجهی کاهش می یابد.

      قالب بندی جداول تو در تو طبق قوانین کلی انجام می شود که در واقع صفحه را جذاب می کند.

      مثال:

      ردیف دوم دارای شش ستون است:

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

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

      تگ rowspan - سطرهای پوشاننده

      اگر به این نشانه گذاری نیاز داشته باشیم چه می کنیم؟

      لطفاً توجه داشته باشید که در ردیف دوم فقط یک ستون داریم، زیرا ستون اول از سطر اول امتداد دارد، فقط شامل این دو می شود.

      در نگاه اول ممکن است این کار پیچیده به نظر برسد، در واقع با کمی تمرین می توانید جدول هایی با هر پیچیدگی ایجاد کنید.

      بیایید به مثال دیگری نگاه کنیم:

      کد HTML:


      111 111

      01 01 01 01 111 111 111

      نمایش در مرورگر:


      111 111
      01 01
      01 01
      111 111 111
      تگ colspan - اتحاد ستون ها

      رایج ترین استفاده از جداول ساختارهای پیچیده، نشانه گذاری یک صفحه وب است. به تصویر نگاه کن:

      به نظر می رسد که ما نیاز داریم که ردیف های اول و سوم هر کدام یک ستون داشته باشند. این با استفاده از پارامتر به دست می آید کلسپنبرچسب زدن

      . این گزینه به مرورگر می گوید که چندین ستون را در یک ستون ترکیب کند. مقدار این پارامتر عددی است که نشان می دهد چند ستون ادغام می شوند.

      مثلا،

      این ستون شامل دو ستون است.

      برای مثال ما:

      عنوان سند

      هدر سایت
      منو محتوا
      پایین سایت

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

      مثال دیگری از نشانه گذاری صفحه وب را در نظر بگیرید:

      هدر سایت
      منو منو منو منو منو منو
      اخبار محتوا

      تعداد - چند سطر و ستون در این جدول وجود دارد؟ برای انجام این کار، به صورت ذهنی یک شبکه را به تصویر تحمیل کنید. سه ردیف و شش ستون وجود خواهد داشت.

      سطر اول شامل یک ستون است که شامل شش ستون است. بیایید آن را بنویسیم:

      هدر سایت
      منو منو منو منو منو منو
      اخبار محتوا
      یک کلاه منو
      محتوا
      پایین سایت

      بنابراین در سطر اول دو ستون داریم که ستون دوم این دو سطر را به هم متصل می کند. بیایید آن را بنویسیم:

      یک کلاه منو
      محتوا
      پایین سایت