Scribd
Upload
2 views

Css

This document provides a tutorial on styling HTML tables using CSS, including common HTML table tags and various CSS functions for enhancing table appearance. It covers attributes for borders, spacing, alignment, and hover effects, along with practical examples. By the end of the tutorial, readers will be equipped to effectively style tables for a better user experience.

Uploaded by

Blnd Rekani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Css

This document provides a tutorial on styling HTML tables using CSS, including common HTML table tags and various CSS functions for enhancing table appearance. It covers attributes for borders, spacing, alignment, and hover effects, along with practical examples. By the end of the tutorial, readers will be equipped to effectively style tables for a better user experience.

Uploaded by

Blnd Rekani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CHECK OUR

MOBILETable in css
WEB
You can replace the image on the
Table in css
screen with your own work. Just
right-click on it and select
“Replace image”
Blnd Abdullah Ibrahim
Shrehan Nizar Ayob
Blnd Abdullah Ibrahim
Shrehan Nizar Ayob
TABLE OF CONTENTS

0 How to Style 0 Common HTML


HTML Tables Table tags
1 with CSS 2
0 CSS functions
0 Some
3 4 Examples
How to Style HTML
Tables with CSS
arly on in web development, HTML tables were very basic and lacked extensive
styling options. Today, however, most tables are styled to create a more
aesthetically pleasing and functional experience for users.CSS provides a number of
attributes for styling tables. These attributes allow you to—among other things—
separate cells in a table, specify table borders, and specify the width and height of a
table.This tutorial will discuss, with examples, how to style a table using CSS. By the
end of this tutorial, you’ll be an expert at it.
Common HTML Table tags

● <tr> - represents rows


● <td> - used to create data cells
● <th> - used to add table headings
● <caption> - used to insert captions
● <thead> - adds a separate header to the table
● <tbody> - shows the main body of the table
There are many CSS functions you can
use to style a table.
Using CSS, you can:
● add borders
● collapse borders
● adjust border spacing
● adjust the width and height of a table
● add padding
● align text horizontally
● align text vertically
● add a mouse-over (hover) feature
● define cell colors
● define how empty cells will display
<tr>
Example 1: This example describes the
<th>Firstname</th>
CSS Table
<th>Lastname</th>
<th>Savings</th>
<!DOCTYPE html>
</tr>
<html><head>
<tr>
<style>
<td>Peter</td>
table, td, th {
<td>Griffin</td>
border: 1px solid #ddd;
<td>$100</td>
text-align: left;}
</tr>
table {
<tr>
border-collapse: collapse;
<td>Lois</td>
width: 100%;}
<td>Griffin</td>
th, td {
<td>$150</td>
padding:15px;
</tr>
}
<tr>
</style>
<td>Joe</td>
</head><body>
<td>Swanson</td>
<h2>The padding Property</h2>
<td>$300</td> </tr>
<p>This property adds space between
</table>
the border and the content in a
</body></html>
table.</p>
<table>
Output
Borders Border Collapse
1 table, th, td {
border: 1px black solid;}
2 table {
border-collapse: collapse; }

Border Spacing Width and


3 table {
border-spacing: 10px 10px;}
4 Height
table
th {
{ width: 100%;}
height: 30px;}

Padding Horizontal Text


5 th, td {
padding: 10px;}
6 Alignment
th {
td {
text-align: left;}
text-align: center;}
Vertical Text Horizontal
7 Alignment
td {height: 40px;
vertical-align: bottom;}
8 Borders
th, td {
border-bottom: 1px solid black;}

Mouse Over Table Colors


9 (:hover)
tr:hover {
background-color: lightgray;}
10 th { background-color: gray;
color: white;}

Striped Design Empty Cells


11 tr:nth-child(even) {
background-color: lightgray;}
12 table { empty-cells: hide;
border-collapse: separate;}
Example 2
Index.html <td>$850,730</td>
<td>$892,580</td>
<table> <td>$801,240</td>
<caption>2019 Fourth Quarter </tr>
Report</caption> <tr>
<thead> <th>Utilization</th>
<tr> <td>83%</td> <td>90%</td>
<th><!-- Intentionally Blank --></th> <td>75%</td>
<th>October</th> </tr>
<th>November</th> </tbody>
<th>December</th> </table>
<tr>
</thead> styles.css
<tbody> table {
<tr> border-collapse: collapse;
<th>Projected</th> }
<td>$820,180</td> th, td {
<td>$841,640</td> border: 1px solid black;
<td>$732,270</td> }
</tr>
<tr>
<th>Actual</th>
Output
THANK
S!

Do you have any questions

You might also like