BACO Table Styles (Future)

Developer
Size
2,913 Kb
Views
34,408

How do I make an baco table styles (future)?

Table styles for BACO future web design style guide.. What is a baco table styles (future)? How do you make a baco table styles (future)? This script and codes were developed by Sam Durphy on 24 September 2022, Saturday.

BACO Table Styles (Future) Previews

BACO Table Styles (Future) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BACO Table Styles (Future)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Tables</h1>
<p>All tables are displayed at 100% width and have a hover state enabled on alternating rows. When inserting tables on a page, add the class, "table" to the table.</p>
<table class="table"> <thead> <tr> <th></th> <th>Tesla Model S P85+</th> <th>BMW i8</th> </tr> </thead> <tbody> <tr> <td><strong>Drivetrain Layout</strong></td> <td>Rear Motor, RWD</td> <td>Mid-engine, AWD</td> </tr> <tr> <td><strong>Motor Type</strong></td> <td>AC induction</td> <td>AC induction</td> </tr> <tr> <td><strong>Power (SAE Net)</strong></td> <td>416 hp @ 5000 rpm</td> <td>228 (gas)/129 (elec)/362 (comb) hp</td> </tr> </tbody> </table>
</body>
</html>

BACO Table Styles (Future) - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Patua+One);
a { color: #002280;
}
a:hover { color: #feb30c;
}
html { color: #444; font-family: Arial, Helvetica, sans-serif;
}
body { color: #444; font-size: 1em; line-height: 1.6em;
}
p { margin: 0 0 20px;
}
small { font-size: 85%;
}
h1, h2 { font-family: Patua One; color: dark-gray; font-weight: normal;
}
h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; color: #444; font-weight: normal;
}
h1 { line-height: 40px;
}
h2 { line-height: 30px;
}
h3 { line-height: 30px; font-weight: bold;
}
h4 { line-height: 20px; font-weight: bold;
}
h5 { line-height: 20px; font-weight: bold;
}
h1 { font-size: 2.083em; color: #c51110; border-top: 5px solid #ebebeb; border-bottom: 1px solid #ebebeb; padding: 7px 0;
}
h2 { font-size: 1.6em;
}
h3 { font-size: 1.2em;
}
h4 { font-size: 1.1em;
}
h5 { font-size: 1em;
}
/*Table Styles*/
.table { width: 100%;
}
table { background-color: transparent; border-collapse: collapse; border-spacing: 0; max-width: 100%;
}
.table tbody tr:hover > td, .table tbody tr:hover > th { background-color: #ebebeb;
}
.table thead th { vertical-align: bottom;
}
.table th { font-weight: bold; border-bottom: 1px solid #c51110;
}
.table th, .table td { border-top: 1px solid #DDDDDD; padding: 8px; text-align: left; vertical-align: top;
}
BACO Table Styles (Future) - Script Codes
BACO Table Styles (Future) - Script Codes
Home Page Home
Developer Sam Durphy
Username sdurphy
Uploaded September 24, 2022
Rating 3
Size 2,913 Kb
Views 34,408
Do you need developer help for BACO Table Styles (Future)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sam Durphy (sdurphy) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!