HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS Table


CSS Tutorial » CSS Table

Another way to create tables is by using CSS, improving the look and feel of the cursor in HTML

<table>
<tr>
<td> text</td>
</tr>
</table>


We can add CSS Table properties as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css
Note: Use external CSS instead.


How to create CSS Table - examples


You can try to execute the following code to change CSS table on this page.
If you like this, you can simply copy the code and paste it on your website.


Example:
Example 1, How to create CSS table - examples:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
border: 1px solid #333333;
}
th, td {
text-align: center;
padding: 16px;
}
th:first-child, td:first-child {
text-align: left;
}
tr:nth-child(even) {
background-color: #DDDDDD
}
.fa-check {
color: #33CC33;
font-weight: bold;
}
.fa-remove {
color: #FF2D2D;
font-weight: bold;
}

</style>
</head>
<body>
<h3 align="center">How to make CSS table</h3>
<p align="center">Change CSS table on this editor and execute code</p>

<table>
<tr>
<th style="width:50%">Features</th>
<th>Basic</th>
<th>Pro</th>
</tr>
<tr>
<td>Sample1 text1</td>
<td><i class="fa fa-remove">0</i></td>
<td><i class="fa fa-check">2</i></td>
</tr>
<tr>
<td>Sample2 text2</td>
<td><i class="fa fa-check">1</i></td>
<td><i class="fa fa-check">2</i></td>
</tr>
<tr>
<td>Sample3 text3</td>
<td><i class="fa fa-check">1</i></td>
<td><i class="fa fa-remove">0</i></td>
</tr>
<tr>
<td>Sample4 text4</td>
<td><i class="fa fa-remove">0</i></td>
<td><i class="fa fa-check">2</i></td>
</tr>
<tr>
<td>Sample5 text5</td>
<td><i class="fa fa-check">1</i></td>
<td><i class="fa fa-check">2</i></td>
</tr>
</table>

</body>
</html>


css table border, center, styling, column width, responsive, styles, class layout, generator, cellspacing CSS Table - css tutorial

2709. CSS Text - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/csstext.htm

667. CSS tutorials - w3resource

https://www.w3resource.com/css/CSS-tutorials.php

3298. CSS background image opacity without affecting child elements, text or content, css tutorial
CSS background image opacity without affecting child elements, text or content css tutorial
https://www.agernic.com/css-tutorial/css-background-image-opacity-without-affecting-text-content.html

813. CSS box model - CSS tutorials - w3resource

https://www.w3resource.com/css/concepts/box-model.php

16. CSS3 Tutorial - An Ultimate Guide for Beginners
CSS Tutorials for Beginners - Learn the fundamentals of the latest CSS3 style sheet language in simple and easy steps and create beautifully designed website.
https://www.tutorialrepublic.com/css-tutorial/

2697. EchoEcho.Com - Web Hosting - JavaScript Tutorial - HTML tutorial - CSS Tutorial - Flash Tutorial - Online for free!
Web hosting and tutorials for html javascript css flash. Online web master forum design articles, graphics, tools, tricks and much more
http://www.echoecho.com/

Your add here
PHP strstr() function

PHP rtrim() function

PHP htmlentities() function

PHP count() Function

PHP strrchr() Function

PHP str_replace() function

PHP empty() Function

PHP lcfirst() function

PHP printf() function

PHP ucwords() function

PHP md5() function

PHP print() function

PHP str_split() function

PHP strtolower() function

PHP implode() function

PHP explode() function

HTML button link - How to create a button style in HTML
CSS Border Width
Design HTML CSS Templates
PHP mysqli_connect () Function
How to get PHP errors to display?
CSS Text Color