ตัวอย่างโค้ดตาราง css hover , code in html
code hover เป็นการตั้งค่าไฮไลท์ให้ข้อความเมื่อเม้าส์อยู่เหนือสิ่งที่เราระบุ
ตัวอย่าง
- ไฮไลท์แถวในตาราง เมื่อเม้าส์อยู่เหนือแถวให้มีสีตามที่ระบุ
tr:hover {background-color:#f5f5f5;}
- ไฮไลท์ข้อความ ระบุตำแหน่ง หรือชนิดของ text .. https://www.w3schools.com/cssref/sel_hover.asp
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover_more
css style>
p:hover, h1:hover, a:hover {
background-color: yellow;
}
</style
ตัวอย่างโค้ดตาราง มี hover
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
empty-cells: hide;
}
th {
padding: 8px;
text-align: center;
}
td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
td.a {text-align: left;}
td.b {text-align: center;}
td.c {text-align: right;}
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h2>จัดตาราง</h2>
<p>ใส่เส้นตารางและใช้รูปแบบ hover (เมื่อชี้เม้าส์ไปที่แถว แถวนั้นจะถูกไฮไลท์)</p>
<p>คอลัมน์แรกแบ่งเป็น 2 คอลัมน์</p>
<p>ใส่สีให้หัวตาราง</p>
<p>จัดรูปแบบ align แต่ละคอลัมน์ไม่เหมือนกัน</p>
<table style="width:100%">
<tr>
<th style= "background-color:powderblue" colspan="2"> ระยะทาง</th>
<th style= "background-color:powderblue" >รถเล็ก 5 ที่นั่ง</th>
<th style= "background-color:powderblue" >รถใหญ่ 7 ที่นั่ง</th>
</tr>
<tr>
<td></td>
<td>(กิโลเมตร)</td>
<td>กิโลเมตรละ (บาท)</td>
<td>กิโลเมตรละ (บาท)</td>
</tr>
<tr>
<td class="c"> ** </td>
<td class="a">ระยะทางไม่เกิน 10 กิโลเมตร ราคาเริ่มต้นที่ 300 บาท</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="c"> ** </td>
<td class="a">ระยะทาง 21 กิโลเมตรแรก รถเล็ก 5 ที่นั่ง ราคาอยู่ที่กิโลเมตรละ 9 บาท</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="c">เริ่มต้น</td>
<td class="a">21 กิโลเมตรแรก</td>
<td>9 บาท</td>
<td>11 บาท</td>
</tr>
<tr>
<td> </td>
<td class="a">36 กิโลเมตร ขึ้นไป</td>
<td>10 บาท</td>
<td>12 บาท</td>
</tr>
<tr>
<td> </td>
<td class="a">100 กิโลเมตร ขึ้นไป</td>
<td>8 บาท</td>
<td>10 บาท</td>
</tr>
</table>
</body>
</html>
ผลลัพธ์ที่ได้
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_examples_pricing_tables