 |
| Html Table example |
The table is very important to represent data in a good way. In this
tutorial, we will discuss how to create a design HTML table with CSS. How to use
border and button in the table. And template page design. You will be able to use
code.
Topic:
Html table CSS examples beautiful
Stylish CSS tables
Html table border style
CSS table design examples with code.
Table CSS template.
Table border in HTML
Html table examples
Html table CSS examples
HTML table defined by table tag. A table consists of three-part. Table header, body, and footer. A row defines by <tr> tag.
If we use header, body, and footer in the table then we do not need to follow like
header first define, then body and at last, footer define. Table header are
defined with <thead> tag, table body with <tbody>tag
and table footer with <tfoot>.
For example, we have two tables, table one structure is header
first code, the body of table code in the second number and at the end, the footer will
code. Table two structure is defined like first footer, second header, and at
the end body. You will think both table's output will be different. Because both
tables are defined in different structures. But output will be the same. This is the advantage of using the table header, body, and footer.
Html automatically arranges header, body, and footer. We can
define a table without a header, body, and footer tag. But there we need to follow the structure
of the table. <hd> tag use to define table’s column heading. it
shows bold text. <td> tag use for table’s column text.
A stylish table with CSS
CSS use to change the style of the table. Without CSS only text
shows. CSS describes how the table show. We can add a border around the table as well
as the table’s cell.
table,th,td{
border: 2px solid #eee;
border-collapse: collapse;
}
In this code we are
apply CSS on <table>,<th> and <td> tag. This style
apply border style on these tags. border-collapse use because when we apply border
then some space are exists and different rectangle show. To join all rectangle
we use this property.
th,td{
width: 25%;
padding: 10px;
}
This style use set
width and padding of column or cell.
td{
text-align: right;
}
Text align property
used to align text in left, center and right. By default text is left aligned.
tr:hover{
background-color: #4DAF7C;
font-style: oblique;
font-weight: bold;
color: white;}
This style use when
you mouse over <tr> tag or table row and change
background-color, font-style, font-weight, and text color. When you leave the
row then it will adopt old style.
.btn{
border: none;
padding: 10px;
color: white;
font-weight: bold;
font-size: 14px;
border-radius: 10px 0 10px 0;
}
This style use for
button, padding property use for space inside an element while margin is space
outside element. Font size is used to change text size. Border-radius property
use to round the corner of the element.
syntax:
border-radius:
top-left-corner
top-right-corner
bottom-right-corner
bottom-left-corner;
For complete source code click here.
 |
| Html Table example |
0 Comments
Thanks