Most már CSS segítségével
Beépítés a fejlécbe
<style type="text/css">
table{
border: 1px solid red;
}
</style>
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Nöjjön a keret!
tr,td{
padding: 115px;
}
Amikor a parancsok egymás ellen vannak
td{
text-align: left;
padding: 115px;
}
Cellák között nő az űr!
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
Legyen címe a táblázatnak
<caption>Monthly savings</caption>
A táblázat további tagolása
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p>
</body>
</html>
Beépítés a fejlécbe
<style type="text/css">
table{
border: 1px solid red;
}
</style>
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Nöjjön a keret!
tr,td{
padding: 115px;
}
Amikor a parancsok egymás ellen vannak
td{
text-align: left;
padding: 115px;
}
Cellák között nő az űr!
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
Legyen címe a táblázatnak
<caption>Monthly savings</caption>
A táblázat további tagolása
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements.</p>
</body>
</html>
Csoportosítás más irányból
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
Összefoglalás:
<table>Használd a táblázat létrehozására<tr>Használd a táblázat sorának létrehozására<td>Használd a táblázat celláinak létrehozására<th>Használd a táblázat oszlopaiban a fejléc léterhozására<caption>Használd a táblázat fejlécének létrehozásáraborderHasználd CSS-en keresztül a táblázat elemeinek a keret létrehozásáraborder-collapseHasználd CSS-en keresztül cella keretének kezelésérepaddingHasználd CSS-en keresztül az elem és az elem határa közötti távolság meghatározásáratext-alignHasználd CSS-en keresztül a szöveg igazítástborder-spacingHasználd CSS-en keresztül a keretek közötti tér meghatározásáracolspanHasználd cellák összevonására sorbanrowspanHasználd cellák összevonására oszlopbanidHasználd egyedi azonosításra
Nincsenek megjegyzések:
Megjegyzés küldése