<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> forms and outlines </title>
<link rel= "stylesheet" href= "Tzy.css" type= "Text/css" >
<body>
<table id= "TB" >
<TR class= "Alt" >
<th> name </th>
<th> Age </th>
<th> Sex </th>
</tr>
<tr>
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
<TR class= "Alt" >
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
<tr>
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
</table>
<br/>
<table id= "TB1" >
<tr>
<th> name </th>
<th> Age </th>
<th> Sex </th>
</tr>
<tr>
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
<tr>
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
<tr>
<td> Xiao Wang </td>
<td>15</td>
<td> Men </td>
</tr>
</table>
<br/>
<br/>
<p style= "outline-style:groove;outline-width:1px" > Text effect Solid box </p>
<br/>
<br/>
<p style= "outline-style:double;outline-width:20px" > Text effects double dashed box </p>
</body>
CSS file Tzy.css
#tb, TB1, tr, TH, TD {
BORDER:5PX solid blue;
/* Plus Border */
padding:5px;
/* Inner margin */
}
#tb1 {
Border-collapse:collapse;
/* Merge Border */
width:500px;
height:500px;
Text-align:center;
}
HTML Learning Notes CSS tables and outlines section eighth (original)