خب امروز در مورد جداول(table) در html میخوایم صحبت میکنم ...
جدول بندی در html شکل خاصی داره برای شروع یک جدول در html باید از تگ <table> سپس محتویات جدول و برای پایان از تگ </table> استفاده میشود . متاسفانه در اینجا نمیشه از جداول به شکل عملی مثل زد و خودتون باید یک فایل html ایجاد کنید و کد ها رو خودتون تست کنید ...
خب برای اینکه به یک جدول با چند ستون افقی ایجاد کنید باید از تگ <td> در قالب تگ اصلی استفاده نمایید، این تگ که مخفف table data هستش برای ایجاد ستون های افقی کاربرد داره لطفا کد زیر رو خودتون تست کنید تا با منظور بهتر ارتباط برقرار کنید
<table> <td> یک </td> <td> دو </td> <td> سه </td> </table>
نیتجه بالا به شکل : یک دو سه خواهد شد و هیچ چیز مشاهده نمیشود ، حالا برای اینکه جدول شکل پیدا کند باید یک خط بردار بهش اضافه کنید پس کد زیر رو جایگزین و تست کنید
<table border="1"> <td> یک </td> <td> دو </td> <td> سه </td> </table>
حالا جدول ما شمای بهتری پیدا کرد . حالا ما یه جدول داریم دارای سه ستون افقی
خب حالا میخوایم یک جدول که دارای سه ستون افقی و دو ستون عمودی هست که دارای 6 خانه هست ایجاد کنیم در اینجا باید از یک تگ جانبی جدید به نام <tr> استفاده کنیم ، این تگ وظیفه داره ستونی های افقی که بعدش میاد رو در یه ستون عمودی بارگزاری کنه (حاظرم شرط ببندم نفهمیدید چی گفتم چون خودمم نفهمیدم چی گفتم )
دور از شوخی به نمونه زیر توجه کنید :
<table border="1"> <td> یک </td> <td> دو </td> <td> سه </td> <tr> <td> چهار </td> <td> پنج </td> <td> شش </td> </tr> </table>
نتیجه میشه یه جدول با دو ستونه عمودی و سه ستون افقی
موضوعات مرتبط: درس هفتم اچ تی ام ال ، ،
برچسبها:
صفحه قبل 1 صفحه بعد



















