جداول HTML
- 上一页 صور HTML
- 下一页 قوائم HTML
شما میتوانید تاوبل با استفاده از HTML ایجاد کنید.
مثال
- 表格
- این مثال نشان میدهد که چگونه تاوبل در یک مستند HTML ایجاد میشود.
- فیرم تاوبل
- این مثالها انواع مختلف فیرمهای تاوبل را نشان میدهد.
表格
تاوبل با استفاده از برچسب <table> تعریف میشود. هر تاوبل دارای چندین ردیف است (با استفاده از برچسب <tr> تعریف میشود)، هر ردیف به چندین سلول تقسیم میشود (با استفاده از برچسب <td> تعریف میشود). حرف td به دادههای تاوبل (table data) اشاره دارد، یعنی محتوای سلول داده. سلول داده میتواند شامل متن، تصویر، لیست، پاراگراف، فرم، خط افقی، تاوبل و غیره باشد.
<table border="1"><td>رود 1، سلول 1</td> <td>رود 1، سلول 2</td> </tr> <td>رود 2، سلول 1</td> <td>رود 2، سلول 2</td> </tr> </table> در مرورگر به شرح زیر نمایش داده میشود:
رود 1، سلول 1 رود 1، سلول 2 رود 2، سلول 1 رود 2، سلول 2 تاوبل و ویژگی فیرم
اگر ویژگی فیرم تعریف نشود، تاوبل فیرم نمایش داده نمیشود. گاهی اوقات این بسیار مفید است، اما بیشتر اوقات ما میخواهیم فیرم نمایش داده شود.
با استفاده از ویژگی فیرم تاوبل با فیرم نمایش داده شود:
<table border="1"><td>رود 1، سلول 1</td> <td>رود 1، سلول 2</td> </tr> </table> سرخطهای تاوبل
سرخطهای تاوبل با استفاده از برچسب <th> تعریف میشوند.
بیشتر مرورگرها سرخطها را به عنوان متن فاتح و مرکزی نمایش میدهند:
<table border="1"><th>عنوان</th> <th>عنوان دیگری</th> </tr> <td>رود 1، سلول 1</td> <td>رود 1، سلول 2</td> </tr> <td>رود 2، سلول 1</td> <td>رود 2، سلول 2</td> </tr> </table> در مرورگر به شرح زیر نمایش داده میشود:
عنوان عنوان دیگری رود 1، سلول 1 رود 1، سلول 2 رود 2، سلول 1 رود 2، سلول 2 خلايياً خاليه فالجدول
در برخی مرورگرها، سلولهای تاوبل بدون محتوای خوب نمایش داده نمیشوند. اگر سلولی خالی باشد (بدون محتوا)، مرورگر ممکن است نتواند فیرم این سلول را نمایش دهد.
<table border="1"><td>رود 1، سلول 1</td> <td>رود 1، سلول 2</td> </tr> <td></td> <td>رود 2، سلول 2</td> </tr> </table> مرورگر ممکن است به این صورت نمایش دهد:
![]()
توجه:این سلول خالی با فیرم نمایش داده نشده است. برای جلوگیری از این وضعیت، یک فضای نگهدارنده خالی در سلول خالی اضافه کنید تا فیرم نمایش داده شود.
<table border="1"><td>رود 1، سلول 1</td> <td>رود 1، سلول 2</td> </tr> <td> </td> <td>رود 2، سلول 2</td> </tr> </table> نحوه نمایش در مرورگر به شرح زیر است:
رود 1، سلول 1 رود 1، سلول 2 رود 2، سلول 2 مثالز زیادتر
- تاوبل بلا فیرم
- 本例演示一个没有边框的表格。
- 表格中的表头(Heading)
- 本例演示如何显示表格表头。
- 空单元格
- 本例展示如何使用 " " 处理没有内容的单元格。
- 带有标题的表格
- 本例演示一个带标题 (caption) 的表格
- 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。
- 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。
- 单元格边距(Cell padding)
- 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
- 单元格间距(Cell spacing)
- 本例演示如何使用 Cell spacing 增加单元格之间的距离。
- 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景。
- 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景。
- 在表格单元中排列内容
- 本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
- 框架(frame)属性
- 本例演示如何使用 "frame" 属性来控制围绕表格的边框。