علامة HTML <table>
مثال
جدول HTML بسيط يحتوي على عمودين وصفين:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد العلامة <table>جدول HTML.
يتكون جدول HTML من عنصر واحد <table>وعنصر واحد أو أكثر من عناصر <tr> و
<th> و <td> .
يحدد العنصر <tr> صفًا في الجدول ، ويحدد العنصر <th> رأس الجدول ، ويحدد العنصر <td> خلية جدول.
قد يتضمن جدول HTML أيضًا عناصر <caption> و <colgroup> و <thead> و <tfoot> و <tbody> .
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
السمات العالمية
تدعم <table>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <table>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
كيفية إضافة حدود مطوية إلى جدول (باستخدام CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
مثال
كيفية محاذاة الجدول إلى اليمين (باستخدام CSS):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال
كيفية توسيط محاذاة الجدول (باستخدام CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال
كيفية إضافة لون الخلفية إلى جدول (باستخدام CSS):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال
كيفية إضافة حشوة إلى جدول (باستخدام CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
مثال
كيفية ضبط عرض الجدول (باستخدام CSS):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
مثال
كيفية إنشاء رؤوس الجدول:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
مثال
كيفية إنشاء جدول مع تسمية توضيحية:
<table>
<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>$80</td>
</tr>
</table>
مثال
كيفية تحديد خلايا الجدول التي تمتد على أكثر من صف أو عمود واحد:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
الصفحات ذات الصلة
دروس HTML: جداول HTML
مرجع DOM HTML: كائن الجدول
دروس CSS: جداول الأنماط
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <table>العنصر بالقيم الافتراضية التالية:
مثال
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}