onlyforbopi
9/26/2018 - 4:11 PM
HTML.CSS.Table.A Typical HTML table.ex1
HTML.CSS.Table.A Typical HTML table.ex1
table {
width:100%;
border:1px solid;
}
tr, th, td {
border:1px solid;
font-family:courier;
}
td {
text-align:center;
padding:10px;
}function borderCollapse() {
var table = document.querySelector("table");
table.style.borderCollapse = "collapse";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A typical HTML table with simple styling</title>
</head>
<body>
<table>
<caption>A typical HTML table</caption>
<tr>
<th scope="col">Given Name</th>
<th scope="col">Family Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Michel</td>
<td>Buffa</td>
<td>52</td>
</tr>
<tr>
<td>Dark</td>
<td>Vador</td>
<td>Unknown</td>
</tr>
<tr>
<td>Luke</td>
<td>Skywalker</td>
<td>Unknown</td>
</tr>
</table>
<p>Click the button below to add the CSS style "border-collapse: collapse;"
to the table (this will make the double borders disappear):</p>
<button onclick="borderCollapse();">Border Collapse</button>
</body>
</html>