002-01141087755 info@CodesRoots.com
تصميم مواقع وتطبيقات الموبايل والجوال-


HTMLجداول

جداول HTML تسمح للمؤلفين على شبكة الإنترنت ترتيب البيانات مثل النصوص والصور، وصلات، والجداول الأخرى، وما إلى ذلك في الصفوف والأعمدة والخلايا.

يتم إنشاء جداول HTML باستخدام <جدول> العلامة التي يتم فيها استخدام <tr> العلامة لإنشاء صفوف الجدول ويستخدم الوسم <td> لخلق خلايا البيانات.

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه كالأتي

Row 1, Column 1 Row 1, Column 2     
Row 2, Column 1 Row 2, Column 2

  هنا الحدود هي سمة من سمات <جدول> العلامة ويتم استخدامه لوضع الحدود في جميع الخلايا. إذا كنت لا تحتاج إلى الحدود ثم يمكنك استخدام الحدود = "0"

عنوان الجدول

ويمكن تعريف عنوان الجدول باستخدام <ال> العلامة. وسيتم طرح هذه العلامة ليحل محل الوسم <td>، والذي يستخدم لتمثيل خلية البيانات الفعلية. عادة سوف تضع الصف العلوي كما هو عنوان الجدول كما هو موضح أدناه، وإلا يمكنك استخدام <ال> عنصر في أي صف.
 

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه كالاتي

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

سمات بطانة الخلايا وهوامش الخلية

هناك دعا بطانة الخلايا وهوامش الخلية التي ستستخدمها لضبط المساحة البيضاء في خلايا الجدول الخاص بك اثنين attribiutes. تحدد السمة هوامش الخلية العرض من الحدود، في حين تمثل بطانة الخلايا المسافة بين حدود الخلية والمحتوى داخل الخلية

مثال

 

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

 سمات  Colspan وروسبان

سوف تستخدم سمة colspan إذا كنت تريد دمج عمودين أو أكثر في عمود واحد. بطريقة مماثلة ستستخدمها روسبان إذا كنت ترغب في دمج اثنين أو أكثر من الصفوف

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

لتكون النتيجه كالأتي

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

الجداول الخلفيات

يمكنك تعيين خلفية الجدول باستخدام واحدة من الطريقتين التاليتين:

     السمة BGCOLOR - يمكنك ضبط لون خلفية الجدول بأكمله أو لمجرد خلية واحدة.

     السمة الخلفية - يمكنك تعيين صورة خلفية لجدول كامل أو لمجرد خلية واحدة.

يمكنك أيضا تعيين لون الحدود أيضا باستخدام السمة والحدود.  

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</htm

 

لتكون النتيجه كالاتي

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

هنا هو مثال باستخدام السمة الخلفية. هنا سوف نستخدم صورة المتاحة في / دليل الصور

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

لتكون النتيجه كالاتي

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

جدول الطول والعرض

يمكنك تعيين عرض الجدول والارتفاع باستخدام العرض والارتفاع attrubutes. يمكنك تحديد عرض الجدول أو ارتفاع من حيث بكسل أو من حيث النسبة المئوية من مساحة الشاشة المتوفرة. .

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه كالاتي 

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

 تسمية توضيحية للجدول

العلامة سوف شرح بمثابة العنوان أو تفسير لهذا الجدول ويظهر في الجزء العلوي من الجدول. تم إهمال هذه العلامة في الإصدار الأحدث من HTML / XHTML.

 مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه

This is the caption

row 1, column 1 row 1, columnn 2
row 2, column 1 row 2, columnn 2

 

الجدول رأس، جسم، وتذييل

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

العناصر الثلاثة لفصل الرأس والجسم، والقدم من الجدول هي:

     <THEAD> - لإنشاء رأس جدول منفصل.
     <TBODY> - تشير إلى الجزء الرئيسي من الجدول.
     <TFOOT> - في إنشاء تذييل جدول منفصل.

قد يحتوي الجدول عدة <TBODY> عناصر تشير إلى صفحات أو مجموعات من البيانات المختلفة. ولكن تجدر الإشارة إلى أن <THEAD> و <TFOOT> يجب أن تظهر العلامات قبل <TBODY>

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

لتكون النتيجه كالاتي

This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

الجداول المتداخلة

يمكنك استخدام طاولة واحدة داخل جدول آخر. لا الجداول فقط يمكنك استخدام العلامات كلها تقريبا داخل بطاقة بيانات الجدول <td>.  

مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>Name</th>
   <th>Salary</th>
   </tr>
   <tr>
   <td>Ramesh Raman</td>
   <td>5000</td>
   </tr>
   <tr>
   <td>Shabbir Hussein</td>
   <td>7000</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>

لتكون النتيجه كالاتي 

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

 

 



اعلانات
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا
شركة تصميم مواقع وتطبيقات موبايل اتصل بنا

002-01141087755

متاح واتس اب - فايبر - لاين
شركة تصميم مواقع وتطبيقات موبايل

info@CodesRoots.com