Scribd
Upload
21 views

HTML2

To define a special style for a table, add an id attribute to the table tag. This id can then be targeted with CSS to style properties of that specific table, such as background color, without affecting other tables. The example shows how to add striped background colors to rows and a black background with white text for table headers in the table with id "t01".

Uploaded by

Twelve Forty-four
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

HTML2

To define a special style for a table, add an id attribute to the table tag. This id can then be targeted with CSS to style properties of that specific table, such as background color, without affecting other tables. The example shows how to add striped background colors to rows and a black background with white text for table headers in the table with id "t01".

Uploaded by

Twelve Forty-four
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:
Example:
<html>
<head> </table>
<style> <br>
table, th, td {
border: 1px solid black; <table id="t01">
border-collapse: collapse; <tr>
} <th>Firstname</th>
th, td { <th>Lastname</th>
padding: 15px; <th>Age</th>
text-align: left; </tr>
} <tr>
table#t01 { <td>Jack</td>
width: 100%; <td>King</td>
background-color: #f1f1c1; <td>30</td>
} </tr>
</style> <tr>
</head> <td>Nami</td>
<body> <td>Robin</td>
<td>24</td>
<h2>Styling Tables</h2> </tr>
<tr>
<table style="width:100%"> <td>Chopper</td>
<tr> <td>Franky</td>
<th>Firstname</th> <td>28</td>
<th>Lastname</th> </tr>
<th>Age</th> </table>
</tr>
<tr> </body>
<td>Jack</td>
<td>King</td>
<td>30</td>
</tr>
<tr>
<td>Nami</td>
<td>Robin</td>
<td>24</td>
</tr>
<tr>
<td>Chopper</td>
<td>Franky</td>
<td>28</td>
</tr>
Example2: <table id="t01">
<html> <tr>
<head> <th>Firstname</th>
<style> <th>Lastname</th>
table { <th>Age</th>
width:100%; </tr>
} <tr>
table, th, td { <td>Jack</td>
border: 1px solid black; <td>King</td>
border-collapse: collapse; <td>30</td>
} </tr>
th, td { <tr>
padding: 15px; <td>Nami</td>
text-align: left; <td>Robin</td>
} <td>24</td>
table#t01 tr:nth-child(even) { </tr>
background-color: #eee; <tr>
} <td>Chopper</td>
table#t01 tr:nth-child(odd) { <td>Franky</td>
background-color: #fff; <td>28</td>
} </tr>
table#t01 th { </table>
background-color: black;
color: white; </body>
} </html>
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
<tr>
<td>Jack</td>
<td>King</td>
<td>30</td>
</tr>
<tr>
<td>Nami</td>
<td>Robin</td>
<td>24</td>
</tr>
<tr>
<td>Chopper</td>
<td>Franky</td>
<td>28</td>
</tr>
</table>
<br>

You might also like