هیلاری نیاکندی
هنگامی که شما در حال ساخت یک پروژه هستید که نیاز به نمایش داده ها به صورت بصری دارد, شما به یک روش خوب برای نمایش اطلاعات نیاز دارید تا به راحتی قابل خواندن و درک باشد.
اکنون, بسته به نوع داده, شما می توانید بین روش های مختلف نمایندگی با استفاده از عناصر اچ تی ام ال را انتخاب کنید.
در بیشتر موارد, جداول راحت تر برای نمایش مقادیر زیادی از داده های ساخت یافته به سادگی. به همین دلیل در این مقاله قصد داریم نحوه استفاده از جداول در اچ تی ام ال و سپس نحوه استایل دهی را بیاموزیم.
ولی, اولین چیزهایی که اول – یک جدول در اچ تی ام ال است?
یک جدول در اچ تی ام ال است?
جدول نمایشی از داده ها است که در ردیف ها و ستون ها مرتب شده اند. در واقع بیشتر شبیه یک صفحه گسترده است. در اچ تی ام ال, با کمک جداول, شما می توانید داده ها مانند تصاویر ترتیب, متن, لینک ها و غیره به سطر و ستون از سلول.
استفاده از جداول در وب اخیرا به دلیل برچسب های شگفت انگیز جدول اچ تی ام ال که ایجاد و طراحی را ساده تر می کند محبوبیت بیشتری پیدا کرده است.
متداول برچسب ها جدول اچ تی ام ال
برچسب های دیگر عبارتند از:
نحو جدول اچ تی ام ال:
| سلول 1 | سلول 2 | سلول 3 |
| سلول 4 | سلول 5 | سلول 6 |
حالا که شما درک درستی از چه جدول متنی همه چیز در مورد و چگونه می توانید ایجاد کنید, اجازه دهید به جلو بروید و ببینید که چگونه ما می توانیم استفاده از این برچسب ها برای ایجاد جداول با ویژگی های بیشتر را.
چگونه برای اضافه کردن یک عنوان جدول در اچ تی ام ال
استفاده می شود برای اضافه کردن سرفصل به جداول. در طرح های پایه عنوان جدول همیشه ردیف بالا را, معنی ما باید اعلام کرد در اولین ردیف جدول ما به دنبال داده های واقعی در جدول. به طور پیش فرض متن منتقل شده در عنوان متمرکز و پررنگ است.
یک مثال با استفاده از
| نام خانوادگی | نام خانوادگی | نشانی رایانامه |
|---|---|---|
| هیلاری | نیاکندی | [email protected] com |
| لاری | ماک | [email protected] com |
از مثال بالا می توانیم بگوییم کدام ستون حاوی کدام اطلاعات است. این با استفاده از برچسب امکان پذیر است.
نحوه افزودن عنوان به جدول
استفاده اصلی از اضافه کردن یک عنوان به جدول توضیحات در مورد داده های نشان داده شده در جدول است. عنوان را می توان در بالای جدول یا پایین قرار داد و به طور پیش فرض همیشه در مرکز قرار می گیرد.
برای قرار دادن یک عنوان را به یک جدول, استفاده از برچسب.
نحو عنوان
یک مثال با استفاده از
| سایتها | کانال های یوتیوب | اپلیکیشن موبایل |
|---|---|---|
| کمپ فریکد | کمپ فریکد | انکی |
| 3 مدرسه | دانشکده | قهرمان برنامه نویسی |
| اکادمی خان | قطار برنامه نویسی | یادگیری |
نحوه استفاده از ویژگی دامنه در جداول اچ تی ام ال
ویژگی دامنه استفاده می شود برای تعریف اینکه یک هدر خاص برای هر یک ستون در نظر گرفته شده, ردیف, و یا یک گروه از هر دو. من می دانم که درک این تعریف ممکن است چالش برانگیز باشد اما ادامه دهید – با کمک یک مثال بهتر خواهید فهمید.
هدف اصلی عنصر دامنه این است که داده های هدف را نشان دهد تا کاربر مجبور به تکیه بر مفروضات نباشد. ویژگی در سلول هدر اعلام می شود و مقادیر را می گیرد ستون , ردیف , گروه کل و گروه ردیف .
مقادیر ستون و ردیف نشان داد که سلول هدر به ترتیب برای ردیف ها یا ستون ها اطلاعات ایجاد می کند.
نحو دامنه
یک مثال با استفاده از
| نیمسال | مقطع تحصیلی | |
|---|---|---|
| 1 | ژانویه-مارس | اعتبار |
| 2 | مه-اوت | عبور |
| 2 | سپتامبر-دسامبر | تمایز |
چه ویژگی دامنه انجام داده است, این است که نشان می دهد که یک سلول هدر متعلق به هر دو ستون, ردیف, و یا یک گروه از هر دو.
در این حالت هدرها به ستون تعلق دارند زیرا این همان چیزی است که ما در کد تنظیم می کنیم. برای دیدن رفتارهای مختلف می توانید با تغییر ویژگی بازی کنید.
نحوه استفاده از سلول پوشا در جدول اچ تی ام ال
شاید با سلولهایی روبرو شده باشید که در دو یا چند ستون یا ردیف در یک جدول کشیده شده اند. که پوشا سلول نامیده می شود.
اگر شما در برنامه هایی مانند دفتر کارشناسی ارشد و یا اکسل کار شما احتمالا تابع با برجسته کردن سلول ها و کلیک کردن بر روی فرمان و صدا استفاده می شودà! داریش.
ویژگی های مشابه را می توان در یک جدول متنی با استفاده از دو ویژگی سلول اعمال, کلپن برای پوشا افقی و طول ردیف برای پوشا عمودی. به دو ویژگی اعداد بزرگتر از صفر اختصاص داده شده است که تعداد سلول هایی را که می خواهید طی کنید نشان می دهد.
یک مثال با استفاده از دهانه
| نام | موضوع | مارکس |
|---|---|---|
| هیلاری | وب پیشرفته | 75 |
| سیستم عامل | 60 | |
| لاری | وب پیشرفته | 80 |
| سیستم عامل | 75 | |
| میانگین کل: 72.5 | ||
در مثال بالا, ما پوشا سلول از 2 سلول در ردیف و 3 سلول در ستون به عنوان نشان داد. ما موفق شده ایم دهانه را به صورت عمودی و افقی اعمال کنیم.
هنگام استفاده از ویژگی ها کولسپان و طول ردیف, اطمینان حاصل کنید که مقادیر اختصاص داده شده را اعلام کنید صحت برای جلوگیری از همپوشانی سلول ها.
چگونه برای اضافه کردن یک سربرگ جدول, بدن, & بالا و پایین صفحه در جداول اچ تی ام ال
درست مثل چگونه یک وب سایت و یا هر سند دیگر دارای سه بخش اصلی – سربرگ, بدن, و بالا و پایین صفحه – بنابراین یک جدول.
در یک جدول با استفاده از ویژگی ها تقسیم می شوند:
- - یک میز جداگانه برای میز فراهم می کند
- - کوناتین محتوای اصلی جدول
- - یک پاورقی جداگانه برای جدول ایجاد می کند
یک مثال با استفاده از , &
| اکتبر | نوامبر | ||
|---|---|---|---|
| فروش | سود | فروش | سود |
| $200,00 | $50,00 | $300,000 | $70,000 |
| نوامبر پربارتر بود | |||
در مثال بالا, هدر با نام ماه نشان, بخشی با ارقام از هر دو فروش و سود نشان دهنده بدن جدول, و در نهایت بخشی با بیانیه نشان دهنده بالا و پایین صفحه از جدول ما.
نکته مهم دیگری که باید توجه داشته باشید این است که یک میز می تواند بیش از یک قسمت از بدن داشته باشد. در یک سناریو مثل این هر گروه بدن ردیف که با هم مرتبط.
نحوه سبک کردن جداول اچ تی ام ال با استفاده از سی اس اس
حتی اگر جداول به طور گسترده ای استفاده می شود امروز, بسیار نادر است برای پیدا کردن یکی که مدل دهید شده است. بسیاری از اشکال مختلف سبک چه که رنگ فونت برجسته ارزش های مهم و غیره استفاده کنید.
یک ظاهر طراحی شده کمک می کند تا جداول حرفه ای و جذاب به چشم ظاهر شوند. بعد از همه شما نمی خواهید خواننده شما به داده های تقسیم شده فقط با یک خط سینل خیره شود.
بر خلاف یک ظاهر طراحی شده با زبان های دیگر و یا ابزار, در اچ تی ام ال شما نیاز به یک فایل اضافی با .پسوند سی اس اس در جایی ایجاد می شود که سبک های خود را اضافه کرده و به فایل متنی خود پیوند دهید.
در زیر, متصل یک زمین بازی کد با یک مثال از یک جدول مدل دهید است. با خیال راحت بازی کنید تا ببینید که چگونه یک ظاهر طراحی متفاوت روی صفحه نمایش تاثیر می گذارد.
زمین بازی کد بالا, ما یک جدول ایجاد کرده اند و مدل دهید با استفاده از برخی از ویژگی های ما در مقاله تحت پوشش.
ما با استفاده از یک فایل سی اس اس مدل دادیم که رنگ و حاشیه را به میز خود اضافه کرده ایم تا خواناتر و زیباتر شود. جدول همچنین دارای یک هدر ثابت بنابراین شما می توانید از طریق مقدار زیادی از داده ها حرکت و هنوز هم هدر یک ستون خاص را ببینید.
بنابراین, ما دیده ایم که یک جدول چیست, ما چند مورد را ایجاد کرده ایم, و حتی یک قدم جلوتر رفته و یک ظاهر طراحی شده را اعمال کرده ایم.
اما داشتن دانش و ندانستن نحوه استفاده هیچ کمکی نخواهد کرد. به طوری که می شود گفت, کجا یا چه زمانی شما نیاز به استفاده از جداول در طراحی خود را?
چه موقع از میز استفاده کنیم
موقعیت های زیادی وجود دارد که جداول ممکن است هنگام توسعه پروژه های شما مفید باشند:
- وقتی می خواهید داده ها را با ویژگی های مشترک مانند مقایسه و مقایسه کنید می توانید از جداول استفاده کنید تفاوت بین الف و ب یا نمرات تیم ایکس به کسانی که از بله.
- شما همچنین می توانید یکی اگر شما می خواهید را به یک مرور کلی از داده های عددی استفاده کنید. یک مثال خوب در این مورد زمانی است که شما سعی می کنید نمرات دانشجویان یا حتی نمرات تیم هایی مانند جدول لیگ برتر را نشان دهید.
- و یک جدول می تواند به خوانندگان کمک کند تا به سرعت اطلاعات خاصی را که به روشنی بیان شده است پیدا کنند. برای مثال اگر شما در حال رفتن را از طریق یک لیست طولانی از نام یک جدول می تواند مورد استفاده قرار گیرد به زیر تقسیم لیست که برای خوانندگان راحت است.
بپیچید
و همچنین می توانید یک ظاهر طراحی شده اضافه کنید تا خوب به نظر برسد و داده ها را با کمک یک فایل سی اس اس به وضوح نشان دهید.
قبل از اینکه ما به نتیجه رسیدن, اجازه دهید انجام یک کار بیشتر:
با استفاده از مواردی که یاد گرفتیم یک جدول ایجاد کنیم تا خلاصه مواردی را که امروز در مقاله پوشش داده ایم خلاصه کنیم. پس از مقایسه طراحی خود را با من دوخته کد زمین بازی زیر:
