در جلسه دهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با جدول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…
آموزش Html؛ آموزش کار با جدول در HTML
جدول در HTML با استفاده از تگ <table> تعریف میشود. هر یک از ردیفهای جدول با تگ <tr>، تیتر جدول با تگ <th> و سلولهای جدول با تگ <td> تعریف میشوند. به صورت پیشفرض، تیتر جداول به صورت پررنگ و در مرکز قرار دارند.
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>پیشنمایش
دقت کنید که عناصر <td> دربردارندهی دادههای جدول هستند. آنها میتوانند حاوی هر نوع عنصر HTML شامل متن، تصویر، فهرست یا حتی جداول دیگر باشند.
افزودن کادر به جدول در HTML
اگر برای جدول خود کادر تعریف نکنید، مرورگر آن را بدون کادر نمایش خواهد داد. کادر جدول با استفاده از خصوصیت border در CSS تعریف میشود:
table, th, td { border: 1px solid black; }پیشنمایش
فراموش نکنید که کادر را هم برای جدول و هم برای خانههای جدول تعریف کنید.
کادرهای مشترک جدول در Html
اگر میخواهید تمام کادرهای جدولتان در یک یک کادر ادغام شود باید از ویژگی border-collapse در CSS استفاده کنید:
table, th, td { border: 1px solid black; border-collapse: collapse; }پیشنمایش
افزودن فاصله به سلول ها جدول در Html
با استفاده از قابلیت cell padding میتوانید بین محتوا و کادر سلولهای جدول یک فاصله مشخص کنید. اگر این padding را مشخص نکنید سلولهای جدول و محتوای آنها بدون فاصله نمایش داده خواهند شد. برای ایجاد فاصله از ویژگی padding در CSS استفاده کنید:
th, td { padding: 15px; }پیشنمایش
چپ چین کردن تیتر در HTML
تیتر جدولها به صورت پیشفرض به صورت پررنگ و در وسط قرار دارند. برای چپچین کردن تیترها از ویژگی text-align استفاده کنید:
th { text-align: left; }
ایجاد فاصله بین کادرها (border spacing) در Html
با استفاده از ویژگی border-spacing در CSS به ایجاد فاصله بین سلولهای یک جدول میپردازید:
table { border-spacing: 5px; }پیشنمایش
به یاد داشته باشید که اگر جدول شما دارای collapsed border باشد این ویژگی هیچ تاثیری در آن نخواهد داشت.
گسترش سلول در بیش از یک ستون جدول در Html
اگر میخواهید یکی از سلولهای جدولتان در بیش از یک ستون گسترش یابد از ویژگی colspan استفاده کنید:
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>پیشنمایش
گسترش سلول در بیش از یک ردیف جدول در Html
اگر میخواهید یکی از سلولهای جدولتان در بیش از یک ردیف گسترش یابد از ویژگی rowspan استفاده کنید:
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>پیشنمایش
اضافه کردن کپشن (Caption) به جدول در Html
برای اضافه کردن کپشن به جدول خود از تگ <caption> استفاده کنید:
<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>پیشنمایش
توجه کنید که تگ <caption> باید بلافاصله پس از تگ <table> وارد شود.
تعریف استایل خاص برای یک جدول در Html
برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی id را به جدول اضافه کنید:
<table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
حالا میتوانید یک استایل خاص را برای این جدول تعریف کنید:
table#t01 { width: 100%; background-color: #f1f1c1; }پیشنمایش
حالا استایلهای بیشتری اضافه کنید:
table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { color: white; background-color: black; }پیشنمایش
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
- انتشار: ۱۹ اردیبهشت ۱۳۹۸
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس