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
