نحوه درج عکس در جدول html حالت تقریبا استاندارد

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

انتخاب یک ویرایشگر

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

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

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

الگوریتم ایجاد جدول

ابتدا بیایید یک الگوریتم کوتاه در مورد نحوه ساخت جدول در HTML گرد هم بیاوریم. این به این دلیل است که توالی هر مرحله را درک کنید. سپس نحوه اجرای هر یک از نکات را دقیقاً تجزیه و تحلیل خواهیم کرد.

بیایید با مراحل مقدماتی شروع کنیم.

1. یک تصویر شماتیک از جدول را روی یک ورق کاغذ بکشید.

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

3. تعداد سلول های سرصفحه را در ردیف تعیین کنید (به عنوان مثال، سلول های "No."، "Name" و غیره).

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

1. برچسب های جدول را درج کنید.

2. برچسب های خط را بر اساس تعداد مورد نیاز خود وارد کنید.

3. در خطوط، تگ خانه ها (معمولی و بزرگ) را نیز بر اساس عددی که روی کاغذ شما نوشته شده است، درج کنید.

4. پارامترهای جدول را به عنوان یک کل تنظیم کنید.

5. در صورت لزوم، شاخص هایی را برای سلول های جداگانه تنظیم کنید.

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

یک جدول ایجاد کنید

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

) جفت می شود، یعنی ساخت ما با این تگ شروع می شود و با آن به پایان می رسد.

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

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

برای سلول های سرصفحه، از عنصر جفت شده استفاده کنید .

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

چگونه ممکن است به نظر برسد؟ مانند آن:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  P / P شماره	نام خانوادگی
  1	;	ایوانف

  .

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

در مورد ایجاد جدول در HTML بحث کرده ایم، اکنون می توانیم به پارامترهای خود ماتریس و ردیف ها و سلول های آن برویم.

پارامترهای جدول

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

پارامترهای جدول در تگ تنظیم می شوند

... این شامل:

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

2. Bordercolor - رنگ حاشیه. می توان آن را به عنوان یک کد رنگی هگزا دسیمال (# 00008B) و نام آن به انگلیسی (DarkBlue) تنظیم کرد. به طور پیش فرض همیشه خاکستری است.

3. Bgcolor - همچنین با کد یا نام تنظیم می شود.

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

• چپ - به سمت راست بپیچید؛
• راست پیچیدن به سمت چپ؛
• مرکز - میز را در مرکز بدون بسته بندی نمایش می دهد.

5. عرض و ارتفاع - عرض و ارتفاع میز. را می توان هم به صورت پیکسل و هم به صورت درصد (نسبت به اندازه پنجره مرورگر) تنظیم کرد.

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

در مورد رنگ متن، به همان شیوه متن معمولی در فرمت HTML استایل بندی شده است.

نمونه ای از طراحی میز:

;

;

;

;

;

;

;

;

P / P شماره	نام خانوادگی
1	;	ایوانف

.

پارامترهای رشته

بنابراین، ما قبلاً نحوه ساخت جدول در HTML و ثبت پارامترهای اصلی آن را فهمیده ایم. اما اگر لازم باشد یک ردیف را برجسته کنیم چه؟ آیا باید سبک آن با متن اصلی جدول متفاوت باشد؟

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

1. Border، bordercolor و bgcolor قبلاً برای شما شناخته شده است.

2. تراز - تراز کردن متن در یک خط. می تواند چپ، مرکز و راست باشد.

3. Valign - این تگ متن را به صورت عمودی تراز می کند. مقادیر زیر را می گیرد:

• بالا - متن با حاشیه بالایی تراز شده است.
• وسط - در مرکز؛
• پایین - در امتداد مرز پایین.

نمونه ای از قالب بندی خط:

• ;
• P / P شماره;
• نام خانوادگی;
• .

پارامترهای سلولی

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

1. Colspan - این پارامتر تعداد ستون هایی را که سلول می تواند پهنا کند را مشخص می کند.

2. Rowspan - قبلاً تعداد ردیف هایی را که این سلول اشغال می کند نشان می دهد.

از آنجایی که طراحی با نوشتن یک خط تفاوتی ندارد، ما نمونه ای از کد را ذکر نمی کنیم.

نتیجه گیری

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

در مورد نحوه درج جدول در HTML، فقط باید رمز آن را دقیقاً در جایی از صفحه خود که فکر می کنید باید در آن قرار گیرد، کپی و جایگذاری کنید.

با خیال راحت آزمایش کنید و به زودی تکنیک ایجاد جداول را به کمال خواهید یافت. موفق باشید!

وظیفه

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

راه حل

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

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

... جدول باید حداقل دارای یک سلول باشد (مثال 1). به جای برچسب مجاز است	از برچسب استفاده کنید	... متن در یک سلول تزئین شده با یک برچسب	، توسط مرورگر به صورت پررنگ نمایش داده می شود و در مرکز سلول تراز می شود. در غیر این صورت، تفاوت بین سلول ها از طریق برچسب ها ایجاد می شود	و	نه مثال 1. ایجاد جدول HTML5 IE Cr Op Sa Fx سلول 1 سلول 2 سلول 3 سلول 4 ترتیب سلول ها و شکل ظاهری آنها در شکل نشان داده شده است. یکی برنج. 1. نتیجه ایجاد جدول با چهار خانه ویژگی مرزی تگ اضافه کردن فقط با مقدار خالی مجاز است ( ) یا برابر با 1. همه مقادیر دیگر اعتبار سنجی نمی شوند. ویژگی padding style برای کنترل حاشیه های داخل سلول ها استفاده می شود که به انتخابگر td اضافه می شود. فاصله بین سلول ها با ویژگی فاصله بین مرزها (مثال 2) که به انتخابگر جدول اضافه شده است تغییر می کند، مرورگر اینترنت اکسپلورر فقط از نسخه 8.0 آن را درک می کند. مثال 2. فیلدهای درون سلولی HTML5 CSS 2.1 IE Cr Op Sa Fx سرفصل 1 سرفصل 2 سلول 3 سلول 4 جدولی با فیلدها و فاصله بین سلول ها در شکل نشان داده شده است. 2. نتیجه مشابهی را می توان با یک حاشیه سفید در اطراف سلول ها به دست آورد. برنج. 2. فیلدها در سلول های جدول سلام به خوانندگان عزیز وبلاگ اغلب در صفحات وب، علاوه بر متن و عکس، نمایش داده های مختلف در قالب جداول ضروری می شود. بله، این قابل درک است، یک جدول راحت ترین راه برای ارائه مقدار زیادی اطلاعات است. لذا این سوال پیش می آید "چگونه جداول را در html وارد کنیم؟"... در این مقاله به این سوال پاسخ می‌دهم و مثال‌های زیادی از جداول html مختلف ارائه می‌دهم. نحوه ایجاد جدول با استفاده از HTML جداول HTML در چهار مرحله ایجاد می شوند. 1. در مرحله اول در html-code با استفاده از جفت برچسب زدن به مرورگر بگویید که یک جدول در صفحه وب درج شده است: ... عنصر جدول یک عنصر در سطح بلوک یک صفحه وب است. بنابراین، جدول همیشه در یک خط جدید، به صورت عمودی از عناصر مجاور نشان داده می شود، بنابراین نیازی به قرار دادن آن در یک پاراگراف نیست. 2. در مرحله دوم فرم می دهیم رشته هایجداول با قرار دادن تگ های جفت شده

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

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

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

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

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

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

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

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

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

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

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

• فقط از تگ برای ایجاد جدول استفاده می شود ;
  برچسب زدن
  فقط می تواند در داخل یک برچسب باشد ;
  برچسب ها
  ، هر محتوای برچسب دیگری نادیده گرفته شده توسط مرورگر؛
  محتویات جدول (متن یا عکس) فقط می توانند در برچسب ها باشند

  , که به جدول عنوان می دهد. متن عنوان داخل این تگ قرار می گیرد و باید داخل تگ باشد ... و مهم نیست که تگ در کجای html-code جدول قرار می گیرد ... علاوه بر این، استفاده از بیش از یک عنصر مجاز است. در یک جدول، و باید در کد 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

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

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

  و	فقط می تواند در داخل یک برچسب باشد
  و	; سلول های جدول باید حداقل مقداری محتوا داشته باشند، در غیر این صورت ممکن است مرورگر اصلاً آنها را نمایش ندهد، اما اگر برخی از سلول ها باید خالی باشد، معمولاً یک فضای بدون شکست (HTML literal) در آن قرار می گیرد. جدول به عناصر بلوک یک صفحه وب اشاره دارد. اندازه جدول و سلول های آن به محتوا بستگی دارد، یعنی. میز در عرض و ارتفاع کشیده شده است تا همه چیز متناسب باشد. یک تورفتگی کوچک بین مرزهای سلول های جداگانه و بین مرز هر سلول و محتویات آن ایجاد می شود. متن در سلول های سرصفحه (عنصر) به صورت پررنگ و در مرکز نمایش داده می شود. حاشیه های اطراف جدول و سلول های آن به طور پیش فرض ترسیم نمی شوند. سربرگ جدول بیایید با یک تگ جفت شروع کنیم
  و	... ویژگی colspan تعداد سلول هایی را که به صورت افقی ادغام شده اند را مشخص می کند و پهنای ردیف به صورت عمودی است: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.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من تمام می کنم، فقط به طور خلاصه: از تگ ها برای درج جدول استفاده می شود - تعیین جدول، - اضافه کردن یک خط و ، بخش تکمیل و بخش بدن - ; برای ترکیب سلول ها، از ویژگی های برچسب استفاده کنید در اینجا کلاس line ابعاد سلول را مشخص می کند. جداول HTMLترتیب و نمایش داده ها با استفاده از سطر یا ستون. جداول از سلول هایی تشکیل شده اند که از تلاقی ردیف ها و ستون ها تشکیل شده اند. سلول های جدولمی تواند شامل هر عنصر HTML مانند سرصفحه ها، لیست ها، متن، تصاویر، عناصر فرم و سایر جداول باشد. برای هر جدول، می توانید یک عنوان مرتبط را با قرار دادن آن قبل یا بعد از جدول اضافه کنید. از جداول دیگر برای چیدمان صفحات وب و چیدمان عناصر منفرد استفاده نمی شود، زیرا چنین تکنیکی انعطاف پذیری ساختار و پاسخگویی سایت را فراهم نمی کند و نشانه گذاری HTML را به میزان قابل توجهی افزایش می دهد. تمام عناصر جدول و همچنین ویژگی های خود در دسترس هستند. ایجاد جداول در HTML محتوا: 1. نحوه ایجاد جدول جدول با استفاده از یک جفت تگ ایجاد می شود عکس. 1. ظاهر جدول بدون قالب بندی خصوصیات css به طور پیش فرض، جدول و سلول ها هیچ مرز قابل مشاهده ای ندارند. مرز هابا استفاده از ویژگی border تنظیم کنید: / * حاشیه های بیرونی جدول خاکستری با ضخامت 1px * / جدول (حاشیه: 1px خاکستری جامد؛) / * مرزهای سلول های ردیف اول جدول * / th (حاشیه: 1px خاکستری جامد؛) / * مرزهای سلول های بدنه جدول * / td (حاشیه: 1px خاکستری جامد؛) فاصله بین سلول های جدولبا استفاده از ویژگی جدول (border-collapse: collapse;) حذف شد. عرضجدول به طور پیش فرض برابر با عرض محتوای داخلی آن است. برای تنظیم عرض، باید یک مقدار برای ویژگی width تنظیم کنید: / * عرض جدول را برابر با عرض بلوک ظرف در * / جدول (عرض: 100٪؛) / * یک عرض ثابت برای جدول * / جدول تعیین می کند (عرض: 600 پیکسل؛) اگر بالشتک و حاشیه برای سلول های جدول مشخص شده باشد، عرض جدول شامل مقادیر زیر خواهد بود: padding-left و padding-right، عرض حاشیه-چپ به اضافه عرض حاشیه-راست آخرین سلول در ردیف. اگر عرض و مرزهای سلول ها مشخص شده باشد، عرض جدول مجموع عرض سلول ها به اضافه عرض حاشیه-چپ و عرض حاشیه-راست آخرین سلول در سطر خواهد بود. . 2. نحوه ایجاد ردیف (ردیف) از یک جدول سطرها یا ردیف های جدول با استفاده از تگ ایجاد می شوند ... تعداد ردیف های افقی در جدول با تعداد تگ های جفت شده تعیین می شود . 3. چگونه یک سلول سرصفحه ستون جدول بسازیم 4. چگونه یک سلول از بدنه جدول بسازیم واقع در همان ردیف تعداد سلول های ردیف جدول را تعیین می کند. تعداد جفت سلول وبرای نشان دادن هر قسمت از جدول عنصر باید به ترتیب زیر استفاده شود: به عنوان یک کودک - قرار دادن یک سلول؛ جدول یک عنصر بلوک از یک صفحه وب است. محتوای سلول ها می تواند نه تنها متن، بلکه تصاویر و جداول دیگر باشد. جدول می تواند شامل سه نوع بخش باشد: بخش سرصفحه - colspan و rowspan. تمام، در پست بعدی در مورد ابزارهای ناوبری در سایت html صحبت خواهم کرد. برای اینکه این پست را از دست ندهید، در به روز رسانی های وبلاگ من مشترک شوید! همه چیز، به زودی می بینمت! این حالت بر اساس حالت استاندارد است با چند استثنا: نمایش تصاویر در داخل سلول های جدول و شکل های زیر یکدیگر مانند حالت سازگاری رخ می دهد. یکی از doctypes زیر برای تغییر حالت نزدیک به استاندارد استفاده می شود. برای فریم ها در HTML: برای فریم ها در XHTML: تصاویر زیر یکدیگر هنگام نمایش تصاویر به صورت عمودی با تغذیه خط از طریق تصاویر در یک حالت تقریبا استاندارد با هم بدون شکاف نمایش داده می شوند. مثال 1.2 کد نمایش دو تصویر را نشان می دهد. مثال 1.2. خروجی دو تصویر HTML 4.01 IE Cr Op Sa Fx از آنجایی که ارقام قبلا یکی بودند و برای راحتی "برش" بودند، یک تصویر واحد را تشکیل می دهند (شکل 1.1). برنج. 1.1. نمایش تصاویر در حالت تقریبا استاندارد در حالت استاندارد، شکاف کوچکی بین تصاویر ایجاد می شود (شکل 1.2). برنج. 1.2. نمایش تصاویر در حالت استاندارد دو راه اصلی برای دور زدن این ویژگی در حالت استاندارد وجود دارد: افزودن نمایشگر: بلوک برای تصاویر. از ویژگی line-height در کانتینر والد استفاده کنید. بیایید این روش ها را با جزئیات بیشتری در نظر بگیریم. تبدیل یک برچسب عنصر بلوک بیش از یک بار به ما کمک می کند تا مشکلات مختلف مرتبط با تصاویر را دور بزنیم. این بار، از این ویژگی استفاده می کنیم که عناصر بلوک یکی زیر یکدیگر قرار می گیرند (تورفتگی ها در نظر گرفته نمی شوند). در این مورد، برچسب از کد، البته، باید حذف شود (مثال 1.3). مثال 1.3. با استفاده از ویژگی block نیازی به استفاده از ویژگی display نیست، می توانید از line-height نیز استفاده کنید، این ویژگی فاصله خطوط را تعیین می کند. با تعیین مقدار 1px برای تگ در داخل که تصاویر قرار دارند، نتیجه مشابهی خواهیم گرفت (مثال 1.4). مثال 1.4. با استفاده از ویژگی line-height XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx تصاویر در جدول افزودن یک تصویر به سلول جدول نیز تفاوت بین حالت های مرورگر را نشان می دهد. برای درک، اجازه دهید کد زیر را تجزیه و تحلیل کنیم (مثال 1.5). برای قابل مشاهده بودن حاشیه اطراف جدول، یک ویژگی حاشیه در استایل ها به انتخابگر TABLE اضافه شده است. مثال 1.5. تصویر در جدول HTML 4.01 CSS 2.1 IE Cr Op Sa Fx نتیجه این مثال در شکل نشان داده شده است. 1.3a. برای حالت استاندارد، خروجی تصویر کمی متفاوت است (شکل 1.3b). آ ب برنج. 1.3. تصویر در جدول a - حالت تقریبا استاندارد، ب - حالت استاندارد قابل توجه است که در حالت استاندارد یک تورفتگی کوچک در پایین تصویر ظاهر می شود. از کجا آمده است؟ اگر متنی را به سلول اضافه کنید و مقیاس را افزایش دهید (شکل 1.4)، به وضوح قابل توجه است که تصویر به عنوان یک عنصر درون خطی با خط پایه متن تراز شده است، نه با لبه پایین آن. بر این اساس، تفاوت بین خط مبنا و لبه پایین متن، مقدار شکاف زیر تصویر است. برنج. 1.4. خط پایه متن باز هم راه های مختلفی برای تغییر رفتار تصاویر در جدول وجود دارد. اولین راه قبلا ذکر شد، این تبدیل تگ است به یک عنصر بلوک با استفاده از ویژگی نمایش که برای مسدود کردن تنظیم شده است (به مثال 1.3 مراجعه کنید). سبک در این مورد به شرح زیر خواهد بود: TABLE IMG (نمایش: بلوک؛) اگر متنی به همراه تصاویر داخل سلول وجود داشته باشد، این سبک می تواند منجر به عواقب نامطلوبی شود. به جای اینکه تصویر در کنار متن قرار گیرد، به عنوان یک عنصر بلوک در یک خط جدید ظاهر می شود. در این مورد، توصیه می شود با استفاده از ویژگی vertical-align با مقدار پایین، تراز تصاویر را به لبه پایینی تنظیم کنید (مثال 1.6). مثال 1.6. تراز کردن تصاویر XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx متن اگرچه تمام مرورگرها در این مثال تراز پایین تصویر را نشان می‌دهند، تراز خود متن کمی متفاوت است. مرورگرهای فایرفاکس، سافاری، IE7 متن را در پایین تصویر و Opera، IE8، IE9 - در بالا تراز می کنند. نقشه های تک پیکسلی در روزگار طرح بندی جدولی، از یک تصویر شفاف با اندازه یک به یک پیکسل، به اصطلاح ترسیم یک پیکسل، به طور فعال استفاده می شد. چنین تصویری که در سلول جدول قرار می‌گیرد اجازه نمی‌دهد تا حد مشخصی کوچک شود، اما خود به راحتی مقیاس‌بندی می‌شود و در نتیجه عرض یا ارتفاع سلول را تعیین می‌کند. از آنجایی که تصویر شفاف است، می توانید رنگ پس زمینه سلول را تنظیم کنید و خطوط افقی یا عمودی با ضخامت مشخص شده را دریافت کنید. در حالت استاندارد، ما با همان مشکلاتی مواجه هستیم که هنگام استفاده از نقاشی‌های معمولی درون سلول‌ها. با اضافه شدن تصاویر از پایین، ارتفاع سلول افزایش می یابد. این مشکل بسیار ساده تر حل می شود و نیازی به استفاده از سبک اضافی ندارد. مرورگرهای مدرن اندازه سلول های داده شده را کاملاً بدون تصاویر اضافی در داخل نمایش می دهند. بنابراین، کافی است به سادگی تصویر تک پیکسلی را از سلول حذف کنید. یک عنوان ستون ایجاد می کند - یک سلول خاص که متن در آن به صورت پررنگ برجسته شده است. تعداد سلول های هدر با تعداد جفت های برچسب تعیین می شود سلول های جدول را ایجاد می کند که داده های جدول در داخل آنها قرار می گیرد. برچسب های جفت شده باید برابر با تعداد جفت سلول ها باشد ... ویژگی های colspan، rowspan، headers برای عنصر موجود است. 5. نحوه افزودن عنوان (عنوان) به جدول امضای جدول ایجاد می کند. بلافاصله بعد از برچسب اضافه شد 6. گروه بندی ردیف ها و ستون های جدول با برجسته کردن سلول های منطقی یکنواخت، یک گروه ستون ساختاری ایجاد می کند. یک یا چند ستون را برای قالب‌بندی ثابت گروه‌بندی می‌کند و به شما امکان می‌دهد به جای تکرار سبک‌ها برای هر سلول و برای هر ردیف، به ستون‌ها استایل بدهید. بلافاصله پس از برچسب ها اضافه شد برنج. 2. برجسته کردن ستون های جدول با رنگ های مختلف با استفاده از تگ ها و 7. گروه بندی بخش های جدول این عنصر گروهی از سرفصل‌ها را برای ردیف‌های جدول ایجاد می‌کند تا ظاهری یکنواخت ایجاد کند. در ارتباط با عناصر استفاده می شود ، بعد و و قبل , و عناصر. می توان آن را یک بار در یک جدول استفاده کرد.محتوای اصلی جدول را گروه بندی می کند. در ترکیب با عناصر و . یک گروه ردیف ایجاد می کند تا اطلاعات مربوط به مبالغ یا کل را نشان دهد که در پایین جدول قرار دارد. یک بار در جدول استفاده شده است. بعد از برچسب، قبل از برچسب ها قرار داده شده است و . این گروه‌بندی ردیف‌ها در استاندارد تعیین شده است، با این انتظار که مرورگرها، هنگام نمایش جداول طولانی، اطمینان حاصل کنند که ردیف‌های داده در حالی که سربار و زیرنویس ثابت نگه داشته می‌شوند، پیمایش می‌شوند و زمانی که آنها به چاپگر خروجی می‌شوند، قادر خواهند بود. برای استفاده از سربار و زیرنویس به عنوان سرصفحه صفحه. با این حال، مرورگرهای مدرن این کار را انجام نمی دهند و یا به سادگی و به عنوان ردیف های داده نمایش داده می شوند، یا در بهترین حالت، به سادگی سطرهای مربوطه را در ابتدا و انتهای جدول قرار می دهند. 8. چگونه سلول های جدول را ترکیب کنیم ویژگی های colspan و rowspan سلول های جدول را ترکیب می کنند. ویژگی colspan تعداد سلول‌های ادغام شده به صورت افقی و پهنای ردیف را به صورت عمودی مشخص می‌کند. برنج. 3. نمونه ای از ترکیب سلول های جدول به صورت افقی با استفاده از ویژگی colspan 9. ویژگی های عناصر جدول جدول 1. ویژگی های عناصر جدول مقادیر پذیرفته شده: لیستی از نام سلول ها که با فاصله از هم جدا شده اند. این نام ها باید از طریق ویژگی id به سلول ها اختصاص داده شوند. مقادیر پذیرفته شده: هر عدد صحیح مثبت. صفت توضیحات، ارزش پذیرفته شده کلسپن تعداد سلول ها در هر ردیف برای ترکیب افقی. سرصفحه ها فهرستی از سلول های سرصفحه را مشخص می کند که حاوی اطلاعات سرصفحه سلول داده فعلی است. برای مرورگرهای گفتار طراحی شده است. ... ... طول ردیف تعداد سلول های ستونی که باید به صورت عمودی ادغام شوند. مقادیر ممکن: عددی از 1 تا 999. طول تعداد پیش‌فرض ستون‌هایی که باید برای ایجاد یک سبک واحد ترکیب شوند، 1 است. 10. نمونه ای از ایجاد جدول برنج. 4. ایجاد منوی رستوران با استفاده از جدول HTML نشانه گذاری HTML منوی رستوران روماشکا آشپزخانه ظروف سرد غذاهای گرم دسرها سالاد تنقلات، خوراک مختصر اولین وعده غذایی دوره های دوم روسی وینیگرت ترب زبان سوپ کلم با کلم ترش کوفته سیب زمینی سیب پخته شده با عسل سالاد اولیویه ژله گوشت گاو ترشی خانگی کپور صلیبی پخته شده در خامه ترش کیک پنکیک شاه ماهی زیر "کت خز" سوف ژله ای پایک هوج گوشت کتلت پوژارسکی کیک "سیب زمینی" اسپانیایی گوش ماهی سرویچه امپاناداس سوپ نان سیر پائلا با غذاهای دریایی چوروس آووکادو و تن ماهی تن آهوتومات فابادا اتریشی راکسو گوشت خوک آلموشاونا لوبیا با ژامبون چانگفاین سوپ ماهی با کوفته های سمولینا تورتیلا سیب زمینی بونوئلوس فرانسوی سالاد Vosges رایت مرغ سوپ خامه ای بادمجان "رنوار" سیب زمینی محدود است بریوش سالاد پانزانلا پنیر خوشمزه سوپ کدو تنبل فرانسوی گراتن مرغ پای لیمو لیگوریایی تارتاروس ماهی قزل آلا ترشی سوپ کنتی تارتفلت ساوارین "پیروزی"