CSS Walk 7 Tables
Let´s create a table of five columns and five rows, to make it easier use the emmet notation
inside <table>
tr*5{Item #$}*5 on the body of a html file.
<body>
<table>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
</table>
</body>
Need to add border
table {
border: 1px solid black;
}
Add border to each element of data table
table {
border: 1px solid black;
}
table td {
border: 1px solid black;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
Add padding on each cell
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 10px;
}
Let´s see what happens when a cell has a text more bigger.
adjust the width of the table data
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 10px;
width: 300px;
}
Select the row when the mouse pass over it.
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 10px;
}
table tr:hover {
background: rgb(18, 202, 202);
}
Set the background of the cell where the mouse pass over.
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 10px;
}
table tr:hover {
background: rgb(18, 202, 202);
}
table td:hover {
background: rgb(12, 128, 128);
color: rgb(18, 202, 202);
}
eot
No hay comentarios:
Publicar un comentario