آموزش قدم به قدم HTML – بخش پنجم – جدول ها و لیست ها

د

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

جدول ها و لیست ها

نحوه ساخت جدول در HTML

جدول ها در html

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

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

باید سطر هایی را در جدولتان ایجاد کنید. بدین منظور، از تگ  <tr> استفاده می کنیم. به هر تعداد که میخواهید سطر در جدول تان داشته باشید باید این تگ را درون تگ <table>  قرار دهید. توجه داشته باشید که تگی است که باز و بسته میشود و درونش اطلاعات قرار میگیرد. به علاوه، درون هر سطر، تعدادی سلول یا ستون داریم که آنها را باید با تگ <td>  ایجاد کنید. به شکل زیر:

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

حالا اگر این کد را در پروژه ای آزمایش کنید، نتیجه ای به شکل زیر میبینید:

۱۰۰ ۲۰۰
۳۰۰ ۴۰۰

همانطور که میبینید، این جدول هیچ لبه یا حاشیه ای ندارد. برای اینکه به آن حاشیه دهید کافیست در تگ <table> از خصوصیت border استفاده کنید. به نمونه زیر دقت کنید:

در کد بالا ما border را برابر با یک در نظر گرفتیم. شما میتوانید آن را بزرگتر کنید تا حاشیه پهن تری داشته باشید. نتیجه کد بالا به شکل زیر خواهد بود:

آموزش ایجاد جداول در html

حاشیه این جدول، به صورت دو خطی است. برای آن که آن را تک خطی کنیم کافیست خصوصیت style=”border-collapse:collapse;” را درون تگ <table>بگذاریم.

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

آموزش ساخت جدول در html

توجه داشته باشید برای اینکه کد استانداردتری داشته باشید بهتر است لبه جداول را با استفاده از html تعیین نکنید. یعنی خصوصیت border را در تگ<table>استفاده نکنید. بهتر است در CSS از کد زیر استفاده کنید تا لبه را برای جدول تنظیم کنید:

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

همچنین برای اینکه سلول ها از یکدیگر فاصله بگیرند میتوانید از خصوصیت border-spacing استفاده کنید:

کافیست کد های css بالا را درون تگ <style> </style> موجود در تگ <head> </head>  پروژه تان قرار دهید. اگر تگ <style> وجود ندارد، آن را ایجاد کنید.

 

از کارشناسان پرگاس انفورماتیک مشاوره تخصصی بگیرید

نرم افزار باشگاه مشتریان, طراحی سایت اختصاصی، نرم افزار مالی سپیدار

۵۶ ۲۸۴ ۲۸۴ (۰۲۱)