در جلسه دهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با جدول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…
آموزش Html؛ آموزش کار با جدول در HTML
جدول در HTML با استفاده از تگ <table> تعریف میشود. هر یک از ردیفهای جدول با تگ <tr>، تیتر جدول با تگ <th> و سلولهای جدول با تگ <td> تعریف میشوند. به صورت پیشفرض، تیتر جداول به صورت پررنگ و در مرکز قرار دارند.
دقت کنید که عناصر <td> دربردارندهي دادههای جدول هستند. آنها میتوانند حاوی هر نوع عنصر HTML شامل متن، تصویر، فهرست یا حتی جداول دیگر باشند.
افزودن کادر به جدول در HTML
اگر برای جدول خود کادر تعریف نکنید، مرورگر آن را بدون کادر نمایش خواهد داد. کادر جدول با استفاده از خصوصیت border در CSS تعریف میشود:
فراموش نکنید که کادر را هم برای جدول و هم برای خانههای جدول تعریف کنید.
کادرهای مشترک جدول در Html
اگر میخواهید تمام کادرهای جدولتان در یک یک کادر ادغام شود باید از ویژگی border-collapse در CSS استفاده کنید:
افزودن فاصله به سلول ها جدول در Html
با استفاده از قابلیت cell padding میتوانید بین محتوا و کادر سلولهای جدول یک فاصله مشخص کنید. اگر این padding را مشخص نکنید سلولهای جدول و محتوای آنها بدون فاصله نمایش داده خواهند شد. برای ایجاد فاصله از ویژگی padding در CSS استفاده کنید:
چپ چین کردن تیتر در HTML
تیتر جدولها به صورت پیشفرض به صورت پررنگ و در وسط قرار دارند. برای چپچین کردن تیترها از ویژگی text-align استفاده کنید:
ایجاد فاصله بین کادرها (border spacing) در Html
با استفاده از ویژگی border-spacing در CSS به ایجاد فاصله بین سلولهای یک جدول میپردازید:
به یاد داشته باشید که اگر جدول شما دارای collapsed border باشد این ویژگی هیچ تاثیری در آن نخواهد داشت.
گسترش سلول در بیش از یک ستون جدول در Html
اگر میخواهید یکی از سلولهای جدولتان در بیش از یک ستون گسترش یابد از ویژگی colspan استفاده کنید:
گسترش سلول در بیش از یک ردیف جدول در Html
اگر میخواهید یکی از سلولهای جدولتان در بیش از یک ردیف گسترش یابد از ویژگی rowspan استفاده کنید:
اضافه کردن کپشن (Caption) به جدول در Html
برای اضافه کردن کپشن به جدول خود از تگ <caption> استفاده کنید:
توجه کنید که تگ <caption> باید بلافاصله پس از تگ <table> وارد شود.
تعریف استایل خاص برای یک جدول در Html
برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی id را به جدول اضافه کنید:
حالا میتوانید یک استایل خاص را برای این جدول تعریف کنید:
حالا استایلهای بیشتری اضافه کنید:
Description | |
---|---|
<table> | Defines a table |
<th> | Defines a header cell in a table |
<tr> | Defines a row in a table |
<td> | Defines a cell in a table |
<caption> | Defines a table caption |
<colgroup> | Specifies a group of one or more columns in a table for formatting |
<col> | Specifies column properties for each column within a <colgroup> element |
<thead> | Groups the header content in a table |
<tbody> | Groups the body content in a table |
<tfoot> | Groups the footer content in a table |
امیدواریم که این مطلب مورد توجه دوستان قرار گرفته باشد…
منبع : W3Schools
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۱۹ اردیبهشت ۱۳۹۸