CSS Table property
HTML table allow web development to arrange data into rows and columns. Styling a table with css can greatly improve it appearance.
CSS table (basic tag information)
1.Width: To set the width of the table
2. Padding: To set the space between the border of each table cell and it's content.
3. Text-transform: To convert the content of the table headers to uppercase.
4. letter-spacing, font-size: add additional styling to the contents of the table headers.
5. border-top, border-bottom: set borders above and below the table headers.
6. text-align: align the writing to the left of some table cells and to the right of the others.
7. background-color: change the background color of the alternative table rows.
8. Hover: highlight a table row when a user mouse goes over it.
CSS styling Table Tag
1.Give cells padding: if text in a table cell either touches a border ( or another cell) it becomes much harder to read. Adding padding helps to improve readability.
2. Distinguish heading: putting all table headings in bold makes them easier to read.you can also make headings uppercase and then either add a background color or an underline to clearly distinguish them from content.
3. Shade alternate rows: shading every other row can help users follow along the lines. use a subtle distinction from the normal color of the rows to keep the table looking clean.
4. Align numerals: You can use the text align property to align the content of any column that contains number to the right,so that large number are clearly distinguished from smaller ones.
Table Example
<!DOCKTYPE html>
<html>
<head>
<style>
body { font-family: Arial, Verdana, sans-serif; color: #111333;
}
table {
width: 600px; }
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; border-top: 1px solid #999; text-align: left;
}
tr.even {background-color: #cccccc;}
tr.hover { background-color: #c3e6e5;}
marks {text-align: right;}
</style>
</head>
<body>
<h1>Topers of the Class in Subject wise</h1>
<table>
<th>Name</th>
<th>Subject</th>
<th class="marks">Marks</th>
<th class="marks">Position</th>
</tr>
<tr>
<td>Neeraj</td>
<td>Mathematics</td>
<td class="marks">96</td>
<td class="marks">First</td>
</tr>
<tr class="even">
<td>poonam</td>
<td>Natural Science</td>
<td class="marks">98</td>
<td class="marks">First</td>
</tr>
<tr>
<td>mone</td>
<td>History</td>
<td class="marks">97</td>
<td class="marks">First</td>
</tr>
<tr class="even">
<td>Amul</td>
<td>Physics</td>
<td class="marks">96</td>
<td class="marks">First</td>
</tr>
</body></html>
Table output
2. Table border
When you. build an HTML table without any border styles or attributes, browser display them without any border.To specify table border in css you can set the table border, head border, table description border etc.
Table background color: In css background color property is used to change the color of the table.The description border.
Table background color Example
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, th, td{
border: 3px solid blue;
border-left-color:red;
border-right-color:green;
border-right-style: dashed: 10 border-bottom-style:dotted; }
table { 12 width:40%;
text-align:left;
background-color:yellow; }
</style>
</head> <body>
<h1>Example of Table border with color</h1> <table>
<tr><th>FirstName</th><th>LastName</th>
<th>Saving</th></tr>
<tr><td>Amit</td><td>Tiwari</td><td>5000</td></tr>
<tr><td>Parichary</td><td>Tiwari</td><td>10000</td></tr>
<tr><td>Ashish</td><td>Shukla</td><td>15000</td></tr>
</table> </body>
</html>
Table background color output
3.Table Border-Radius-property
It is used to make the corners of the table borders as rounded.
Table Border-Radius- property Example
<!DOCTYPE html>
<html><head>
<style>
table, tr, th, td{
border: 3px solid blue;
border-left-color:red;
border-right-color:green;
border-right-style:dashed;
border-bottom-style:dotted;
border-radius:50px; /* For change the table border*/ padding: 16px;
background-color:yellow;
width:40%; text-align:center;
</style>
</head> <body>
<h1>Example of Table border with color</h1>
<table>
<tr><th>FirstName</th><th>LastName</th><th>Saving</th></tr>
<tr><td>Amit</td><td>chavan</td><td>5000</td></tr>
<tr><td>Pratiksha</td><td>Tivari</td><td>10000</td></tr>
<tr><td>aradhy</td><td>mohite</td><td>15000</td></tr>
</table>
</body> </html>
Table Border-Radius property output
Visit Link
No comments:
Post a Comment