جدول ها در html

سلام خدمت تمامی دوستان ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جدول ها در html یا Tables در HTML با من همراه باشید. کار با جدول ها یا Tables در HTML جدول یا جداول یا به انگلیسی Tables به مجموعه از اطلاعات که بصورت سطر و ستونی در کنار همدیگر تنظیم شده اند گفته می شود ، جدول ها یکی از بهترین روش های ارائه و درک سریع و بالا از اطلاعات می باشد.ما در زبان HTML و بطور کلی در یک صفحه ی وب میتوانیم به راحتی از جدول ها استفاده نماییم و آنها را ایجاد نماییم، برای مثال لطفا به جدول زیر توجه نمایید. در HTML ما نیز میتوانیم از جدول ها یا Tables استفاده نماییم، برای ایجاد یک جدول در HTML باید از تگ <table> و برای ایجاد سطرهای جدول از تگ <tr> و در نهایت برای ایجاد خانه ها یا سلول های جدول از تگ <td> استفاده کرد. تگ table بدنه اصلی و وجودی جدول رو ایجاد میکند و با استفاده از تگ tr سطر رو ایجاد میکنیم سپس با استفاده از تگ td میایم و یک سلول یا خانه ایجاد میکنیم و در نهایت هم تگ td را میبندیم و هم تگ tr که سطرمون هست. حال لطفا به مثال زیر توجه نمایید : <body><table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr></table></body> امتحان کنید حال اگر لطف بفرمایید و بروی دکمه (امتحان کنید) کلیک نمایید در خروجی شما یک جدول را مشاهده خواهید کرد که البته در ظاهر ما جدولی خط کشی شده را نمی بینیم، ولی خب در واقع و در اصل وجود جدول ایجاد شده است فقط کافیه در ادامه با استفاده از چند دستور CSS ظاهر جدول مون رو کمی جذاب تر کنیم. جداول یا Tables در HTMLخب دوستان من در ادامه میخوام شمارو با یکسری تگ و ویژگی CSS که میتوان بروی جدول ها اعمال کرد آشنا کنم، لطفا در ادامه با من همراه باشید. th – برای تعیین عنوان ستون های جدولCaption – برای تعیین عنوان یا کپشِن جدولCss Border – ایجاد خط به دور جدول و سلول هاCss Padding – ایجاد فاصله بین محتویات جدولCss Text-align – تعیین محل قرار گیری محتوای جدولColSpan – برای ادغام ستون هاRowSpan – برای ادغام سطرها تگ Th جدول در HTMLتگ <th> برای تنظیم عناوین ستون های یک جدول می باشد. لطفا به مثال زیر توجه نمایید و همچنین برای مشاهده خروجی دستورات زیر بروی دکمه (امتحان کنید) کلیک نمایید.<table><tr><th>Name</th><th>Family</th></tr></table> امتحان کنید تگ caption در جدول هابا استفاده از تگ caption میتونیم یک کپشن – عنوان را برای جدول مان مشخص نماییم، که البته باید توجه داشته باشید تگ caption حتما بلافاصله بعد از تگ table قرار بگیرد.<table><caption>Www.Free-Learn.IR</caption><tr><td>A</td><td>B</td></tr></table> امتحان کنید ویژگی border در جدول هابا استفاده از ویژگی border ما میتونیم یک خط را به دور لبه های جدول مان بکشیم.<style>table,td { border:2px solid blue;}</style> امتحان کنید ویژگی padding در جدول هابا استفاده از ویژگی padding میتونیم یک فضای مشخصی را بین محتویات و سلول ها ایجاد نماییم.<style>td {padding:10px;}</style> امتحان کنید ویژگی text-align در جدول هابا استفاده از ویژگی text-align میتونیم تراز یا محل قرار گیری محتویات سلول های جدول را مشخص نماییم.<style>td {text-align:center;}</style> امتحان کنید صفت colspan در جدول هاما با استفاده از صفت colspan میتونیم اندازه یک ستون از جدول را به تعداد هرچند ستون که بخواهیم تنظیم نماییم.<table><tr><td colspan="2">A</td><td>B</td></tr></table> امتحان کنید صفت rowspan در جدول هابا استفاده از صفت rowspan میتونیم اندازه یک سطر از جدول را به تعداد هرچند سطر که بخواهیم تنظیم نماییم.<table><tr><td rowspan="2">A</td><td>B</td></tr></table> امتحان کنید منبع: سایت آموزشی فری لرن برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.