Document
advertisement
Introduction to CSS
Part 4
CSS Table
Table Borders
The example below specifies a black border for table, th, and td elements
<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bader</td>
<td>Ali</td>
</tr>
<tr>
<td>Paul</td>
<td>Manuel</td>
</tr>
</table>
</body>
</html>
Table Borders
The table in the previous example has double borders. Why?
To display a single border for the table, use the border-collapse property.
<html>
<head>
<style type="text/css">
table, td, th
{
border:1px solid black;
border-collapse:collapse
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bader</td>
<td>Ali</td>
</tr>
<tr>
<td>Paul</td>
<td>Manuel</td>
</tr>
</table>
</body>
</html>
Table Width and Height
<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid
black;
}
table
{
width:100%;
height:150px;
}
th
{
height:75px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bader</td>
<td>Ali</td>
</tr>
<tr>
<td>Paul</td>
<td>Manuel</td>
</tr>
</table>
</body>
</html>
Table – Text alignment
<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid
black;
}
td
{
width: 100px;
height:100px;
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Saving</th>
</tr>
<tr>
<td>Bader</td>
<td>100</td>
</tr>
<tr>
<td>Paul</td>
<td>300</td>
</tr>
</table>
</body>
</html>
Table colors
<html>
<head>
<style type="text/css">
table,td,th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bader</td>
<td>Ali</td>
</tr>
<tr>
<td>Paul</td>
<td>Manuel</td>
</tr>
</table>
</body>
</html>
Box Model
The CSS Box Model
• All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
CSS box model
• Explanation of the different parts:
• Margin - Clears an area around the border. The margin does not have a
background color, it is completely transparent
• Border - A border that goes around the padding and content. The border
is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by
the background color of the box
• Content - The content of the box, where text and images appear
CSS Box Model
<html>
<head>
<style type="text/css">
div.ex
{
margin:10px;
border:3px solid gray;
padding:7px;
width:200px;
}
</style>
</head>
<body>
<div class="ex">
ISC 340
<br />
Web Programming
</div>
</body>
</html>
3px grey color
7px
10px
200px
ISC 340
web Programming
What is the total width of the box?
NOTE: you can specify the height of
The box also.
CSS Border
Border
<style type="text/css">
p{ border-style: dotted }
/* dashed, solid, double,
groove, ridge, inset,
outset */
p{ border-color: yellow
green red blue}
/* top –yellow; right –
green; bottom – red;
left – blue */
p{ border-width: 10px
20px 30px 40px }
/*
top – 10px; right –
20 px; bottom – 30
px; left – 40px
</style>
**NOTE**: None of the border properties
will have ANY effect unless the borderstyle property is set!
Border - Individual sides
<style type="text/css">
/* Setting the style for the top border only */
/* border-right, border-bottom, border-left */
p{ border-top-color: yellow }
/* green, blue */
p{ border-top-width: 50px } /* 50cm */
</style>
What is missing in the above CSS rules?
All Borders Together - short notation
<html>
<head>
<style type="text/css">
h1{border: 50px solid red}
/* width, style, color */
</style>
</head>
This is head
<body>
<h1>This is head</h1>
</body>
</html>
border-bottom Together – short notation
(border-top, border-right, border-left )
<html>
<head>
<style type="text/css">
h1{border-bottom: 50px solid red} /* width, style, color*/
</style>
</head>
<body>
<h1>This is head</h1>
</body>
</html>
This is head
CSS Margin
Margin-Individual sides
<style type="text/css">
margin-top:100px;
margin-bottom:100px;
margin-right:2cm;
margin-left:2cm ;
</style>
NOTE: It is possible to use negative values, to overlap content.
Margin Together – Shorthand
<html>
<head>
<style type="text/css">
h1{margin: 2cm 3cm 20cm 5cm}
//top, right, bottom, left
</style>
</head>
<body>
<h1>This is head</h1>
</body>
</html>
CSS Padding
Padding-Individual sides
The padding clears an area around the content (inside the
border) of an element.
<style type="text/css">
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
</style>
Padding Together – Shorthand
<html>
<head>
<style type="text/css">
td
{padding:20px 30px 40px 50px;}
//top, right, bottom, left
</style>
</head>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
</tr>
</table>
</body>
</html>
