Scribd
Upload
3 views

Computer Science & Mathematics Major for College_ Computer Science & Programming by Slidesgo[2]

The document provides a tutorial on styling HTML tables using CSS, detailing various attributes and functions that enhance table aesthetics and functionality. It covers common HTML table tags, CSS properties for borders, spacing, alignment, and hover effects, along with examples of styled tables. By following the tutorial, readers will learn how to effectively use CSS to create visually appealing tables.

Uploaded by

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

Computer Science & Mathematics Major for College_ Computer Science & Programming by Slidesgo[2]

The document provides a tutorial on styling HTML tables using CSS, detailing various attributes and functions that enhance table aesthetics and functionality. It covers common HTML table tags, CSS properties for borders, spacing, alignment, and hover effects, along with examples of styled tables. By following the tutorial, readers will learn how to effectively use CSS to create visually appealing tables.

Uploaded by

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

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 Tables
0 CSS functions
3 4
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
● <tfoot>- creates a separate footer for the table
Css Tables
CSS is used to style tables. While the table above displays data in an
organized way, it is written in plain HTML (there are no styles
present). By using CSS, you can make tables more
aesthetically pleasing.
“
This is a quote, words full of wisdom
that someone important said and can
make the reader get inspired.”

—SOMEONE FAMOUS
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
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;}
<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
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