Attributes and table styling in html
After creating a table in an HTML web page, you can preview special table attributes and CSS styling effects in an ordinary HTML table by styling simple tables and changing the default preview to a more attractive and commercial format layout with new themes and styling.
So, let’s learn about table attributes and CSS styles and effects in an HTML web page.
HTML Table Tag Attributes.
HTML <table> tag attributes.
Table border tag attributes – You can custom define the width of the table border created in an HTML web page, manually modify the table width as per your requirement.
Table border tag example.
<table border=”2″>
<!– write desire table content here –>
</table>
Table cellspacing tag attributes – You can create and adjust space in a particular table cell as per your requirement to decide how much space is to be created between the table cells created in an HTML web page.
Table cellspacing tag example.
<table cellspacing=”12″>
<!– write desire table content here –>
</table>
Table cellpadding tag attributes – Creates empty space between table cell text content and cell border in HTML web page, you can create and adjust table cell padding space as per your table requirement.
Table cellspadding tag example.
<table cellpadding=”18″>
<!– write desire table content here –>
</table>
Table width tag attributes – You can increase or decrease the default width size of table created in existing HTML web page. You can custom define table width as per your requirement.
Table width tag example.
<table width=”100%”>
<!– write desire table content here –>
</table>
table align tag attributes – You can manually align the text information of table created in existing HTML web page in left, right, center order.
Table align tag example.
<table align=”right”>
<!– write desire table content here –>
</table>
table <th> and <td> tag attributes.
Table colspan attributes – How many columns wide or spread a particular cell block of a created table in the current HTML web page, this setting is adjusted by the table colspan tag.
Table colspan tag example.
<td colspan=”4″>It Spread Table Cell Content in 4 column</td>
table rowspan attributes – How many rows wide or spread a particular cell block of a created table in the current HTML web page, generally table rowspan attributes make the table rows as big as required.
Table rowspan tag example.
<td rowspan=”4″>It Spread Table Cell Content in 4 row</td>
Applying CSS styling to the created table in the HTML web page.
By using created table CSS styling effects in HTML web page, you can apply more attractive theme colors, attributes and effects to an ordinary HTML created table.
So let’s understand some basic HTML table CSS styling.
Table styling effects in simple HTML.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
color:gray;
width: 100%;
border-collapse: collapse; /* display elegant clean table border */
}
th, td {
border: 2px solid orange;
padding: 10px;
text-align: left;
}
th {
background-color: #f213f342; /* Light pink for table header */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
Html table example with table cell padding.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
color:blue;
font-family:monotype corsiva; /* Display monotype corsiva font color */
font-size:1.2em;
border: 2px solid red; /* Display solid red border */
padding: 14px;
text-align: left;
font-weight: bold;
}
th {
background-color: lime; /* Display lime background color */
}
tr:nth-child(even) {
background-color: yellow; /* Display each even row with yellow color*/
}
tr:hover {
background-color: orange; /* Display orange color when mouse hover on table */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
Advanced Css Table Border And Spacing Styling Table Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Table Attributes</title>
<style>
table {
border: 2px solid #888; /* display Table solid border */
}
th, td {
font-family: times new roman;
border: 3px solid #666; /* display table Cell borders */
color:brown;
font-size:1.2em;
border: 2px solid red; /* Display solid red border */
text-align: left;
font-weight: bold;
}
th {
background-color: yellow; /* Display yellow background color */
}
tr:nth-child(even) {
background-color: orange; /* Display each even row with orange color*/
}
Spacing:
table {
border-spacing: 100px; /* display cell space */
}
</style>
</head>
<body>
<h1><center>Html Table With Css Styling</center></h1>
<table>
<thead>
<tr>
<th>#.</th>
<th>Course Name.</th>
<th>Course Duration.</th>
<th>Course Price.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Python Programming</td>
<td>2 Month</td>
<td>Rs – 999</td>
</tr>
<tr>
<td>2.</td>
<td>JavaScript Programming</td>
<td>2 Month</td>
<td>Rs – 1099</td>
</tr>
<tr>
<td>3.</td>
<td>Ruby Programming</td>
<td>2 Month</td>
<td>Rs – 1199</td>
</tr>
<tr>
<td>4.</td>
<td>Kotlin Programming</td>
<td>2 Month</td>
<td>Rs – 1299</td>
</tr>
</tbody>
</table>
</body>
</html>
