Scribd
Upload
40 views

CSS Part 2

The document discusses various CSS properties for styling tables. Some key points: - The border property is used to specify borders for table, th, and td elements. - The border-collapse property collapses table borders into a single border. - The width and height properties control the width and height of the table. - Padding, text-align, vertical-align properties control alignment and spacing within table cells. - Hover, nth-child selectors can be used to highlight rows or add striping to tables.

Uploaded by

Tech Code
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

CSS Part 2

The document discusses various CSS properties for styling tables. Some key points: - The border property is used to specify borders for table, th, and td elements. - The border-collapse property collapses table borders into a single border. - The width and height properties control the width and height of the table. - Padding, text-align, vertical-align properties control alignment and spacing within table cells. - Hover, nth-child selectors can be used to highlight rows or add striping to tables.

Uploaded by

Tech Code
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

Working with Table

• To specify table borders in CSS, use the border


property.
• The example below specifies a black border for
<table>, <th>, and <td> elements:
• table, th, td {
border: 1px solid black;
}

• Outline-style: solid, groove, dashed, dotted,


double, none etc.
<html> <tr>
<head> <td>Peter</td>
<style> <td>Griffin</td>
table, th, td { </tr>
border: 10px solid red; <tr>
} <td>Lois</td>
</style> <td>Griffin</td>
</head> </tr>
<body> </table>

<h2>Add a border to a table:</h2> </body>


<table> </html>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
th,td{
border: 1px solid red;
}
</style>
</head>
<body>
<style>
td{
border: 1px solid red;
}
</style>
Collapse Table Borders

• The border-collapse property sets whether the


table borders should be collapsed into a single
border:
• table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}
Table width and height
• Width and height of a table are defined by the
width and height properties.
• table {
width: 100%;
}

th {
height: 50px;
}
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th{
height: 50px;
}

</style>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th,td{
height: 50px;
}

</style>
Horizontal alignment
• Text-align property align text in th/ td
– Left, right, center
– th {
text-align: left;
}
Vertical alignment
• Vertical-align property align text in td/td
– Top, bottom, middle
– td {
height: 50px;
vertical-align: bottom;
}
Table Padding
• To control the space between the border and
the content in a table, we use padding
property on <td> and <th> elements
• th, td {
padding: 15px;
text-align: left;
}
Horizontal dividers
• Add border-bottom property to th/ td
elements to add horizontal dividers
• th, td {
border-bottom: 1px solid #ddd;
}
Hoverable table
• :hover selector on tr/th/td to highlight table
rows on mouse over
• tr:hover {background-color: red;}
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th:hover {background-color:red;}
</style>
Stripped table
• Stripped tables, use the nth-child() selector
and add a background-color to all even (or
odd) table rows
• tr:nth-child(even) {background-color: red;}
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {background-color: red;}


</style>
Table color
• Background-color and color property
• th {
background-color: red;
color: white;
}
Responsive table
• Add a container element ( <div>) with overflow-
x:auto around the <table> element to make it
responsive:
• <div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
Table Design using CSS property
• Design a table of 3x3 showing usage of
following properties:
– Collapsed border in red color
– Data in blue color
– Headings in green color
– Background color in cells yellow
– All elements left aligned including headers
– Hover effect on rows
– Make the table responsive
Lists
• unordered lists (<ul>) - the list items are
marked with bullets
• ordered lists (<ol>) - the list items are marked
with numbers or letter
• The CSS list properties allow you to:
– Set different list item markers for ordered lists
– Set different list item markers for unordered lists
– Set an image as the list item marker
– Add background colors to lists and list items
List item markers
• The list-style-type property specifies the type of list item marker.
• CSS
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
<html> <ul class="b">
<head> <li>Coffee</li>
<style> <li>Tea</li>
ul.a { <li>Coca Cola</li>
list-style-type: circle; </ul>
} <ol class="c">
ul.b { <li>Coffee</li>
list-style-type: square; <li>Tea</li>
} <li>Coca Cola</li>
ol.c { </ol>
list-style-type: upper-roman; <ol class="d">
} <li>Coffee</li>
ol.d { <li>Tea</li>
list-style-type: lower-alpha; <li>Coca Cola</li>
} </ol>
</style> </body>
</head> </html>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
An image as the list item marker
• list-style-image property specifies an image as
the list item marker
• ul {
list-style-image: url('sqpurple.gif');
}
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
Position the list item marker
• list-style-position property specifies
the position of the list-item markers
• Outside Vs inside
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
Styling lists with colors
<style>
ol {
background: red;
padding: 20px;
}
ul {
background: blue;
padding: 20px;
}
ol li {
background: green;
padding: 5px;
margin-left: 35px;
}
ul li {
background: yellow;
margin: 5px;
}
</style>
Display property
• It specifies how an element is displayed
• Elements
– Block: Div, h1, p, form, section etc.
• Default start on new line
– Inline: a, img etc.
• Does not start on new line
• Display: inline, block, none
– Visibility: hidden
Example
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
</ul>
</body>
</html>
Output?
<html>
<head>
<style>
h1,p {
display: none;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<p>ITSEC </p>

</body>
</html>
Output?
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<h1 class="hidden"> ITSEC </h1>

</body>
</html>
Box Model
• Consists of margin, border, padding and actual content.
• Margin: An area outside the border. The margin is
transparent.
• Border: It goes around the padding and content.
• Padding: An area around the content<head>
Box Model
It allows us to define a border around elements and define space between elements
<html>
<head>
<style>
div {
background-color: red;
width: 300px;
border: 10px solid green;
padding: 50px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Example of Box Model</h2>
<p>Hello World</p>
<div>ITS Engineering College</div>
</body>
</html>
Opacity
• It specifies the opacity/transparency of an
element
– It can take a value from 0.0 - 1.0
• img {
opacity: 0.5;
}
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>

<img src="img_forest.jpg" alt="Forest" width="170" height="100">

</body>
</html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
<html>
<head>
<style>
div {
background-color: red;
padding: 5px;
}
div.first {
opacity: 0.6;
}
p{
opacity:0.2;
}
</style>
</head>
<body>
<p> Hello World</p>
<div class="first"><p>opacity 0.6</p></div>
</body>
</html>
Navigation Bar
<html>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html> li a:hover {
<head> background-color: black;
<style> color: white;
ul { }
list-style-type: none; </style>
margin: 0; </head>
padding: 0; <body>
width: 200px;
background-color: yellow; <ul>
} <li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
li a { </ul>
display: block;
color: gray; </body>
padding: 8px; </html>
text-decoration: none
}

You might also like