فواصل

الجداول بـ html

ان مهمه انشاء الجدول أبسط مما تتخيل ركز معي في الخطوات البسيطه التاليه
الجدول الأول يشبه ذلك :

[html]</pre>
<table>
<tbody>
<tr>
<td>Volcano Name</td>
<td>Location</td>
<td>Last Major Eruption</td>
<td>Type of Eruption</td>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<td>Mt .St. Helens</td>
<td>Washington</td>
<td>1980</td>
<td>Explosive Eruption</td>
</tr>
</tbody>
</table>
<pre>
[/html]

وهذا الكود يكون الجدول بالشكل التالي :

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt .St. Helens Washington 1980 Explosive Eruption

: الجدول من الضروري الإشارة إلى المتصفح الذي ترغب في ترتيب المحتوى بطريقة جدوليه.: العنصر tr يحدد صف الجدول. هذا يسمح للمتصفح لتنظيم أي محتوى بينولبه بطريقة أفقية ، أو كل على التوالي.

: العنصر TD يعرف كل خلية الجدول أو الفضائية الفردية عن المحتوى داخل الصف.[html]</pre>
<table>
<tbody>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
<pre>
[/html]

إضافة بعض المميزات أو كثر
الجدول الأساسي الآن موجود، يمكنك إضافة بعض الخصائص الأكثر تعقيدا ، سوف أقوم بإضافة رؤوس التوضيحية وجدول للمساعدة على تحسين البيانات سواء من حيث الدلالات وضوح للقراء الشاشة. يشبه ذلك :

[html]</pre>
<table><caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
<tbody>
<tr>
<th>Volcano Name</th>
<th>Location</th>
<th>Last Major Eruption</th>
<th>Type of Eruption</th>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<td>Mt. St. Helens</td>
<td>Washington</td>
<td>1980</td>
<td>Explosive Eruption</td>
</tr>
</tbody>
</table>
<pre>
[/html]

وهذا الكود يمثل ذلك

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

ولشكل أظرف واشيك يمكنك عمل هذه التنسيقات الأتيه :

[html] body {
background: #ffffff;
margin: 0;
padding: 20px;
line-height: 1.4em;
font-family: tahoma, arial, sans-serif;
font-size: 62.5%;
}

table {
width: 80%;
margin: 0;
background: #FFFFFF;
border: 1px solid #333333;
border-collapse: collapse;
}

td, th {
border-bottom: 1px solid #333333;
padding: 6px 16px;
text-align: left;
}

th {
background: #EEEEEE;
}

caption {
background: #E0E0E0;
margin: 0;
border: 1px solid #333333;
border-bottom: none;
padding: 6px 16px;
font-weight: bold;
[/html]

مقالات ذات صلة

اضف رد