css الدرس الثامن فى

Tables

-وفى هذا الجزء سنتعلم ضبط الاستايل الخاص بالجداول والخصائص المستخدمة فى ضبط استايل الجداول قد تمت دراستها سابقا وهى كالتالى:

Property

border

Width , height

text-align

margin , padding

وتاج الجدول كما تم شرحها سابقا فى كورس(HTML) هو<table> لانشاء الجدول وداخلة <tr> لانشاء الصف كما ان <td> لانشاء العمود وايضا <th> لعمل عنواين فى الجدول ويتم عمل استايل لكل جزء من تاج الجدول كما فى المثال التالى:

<!DOCTYPE html>

<html>

<head>

<style>

table

{

width:100px;

height:50px;

}

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

td

{

text-align:right;

padding:15px;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>100$</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>150$</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>300$</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>250$</td>

</tr>

</table>

</body>

</html>

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: