Thuộc tính tiêu đề HTML DOM TableData trả về và sửa đổi giá trị của thuộc tính tiêu đề của một bảng trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Tiêu đề trả về
object.headers
2. Thêm colspan
object.headers = “headers_ids”
Hãy để chúng tôi xem một ví dụ về thuộc tính headers -
Ví dụ
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM TableData headers Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<thead>
<tbody>
<tr>
<td headers="Name">John</td>
<td headers="Rollno">071717</td>
</tr>
<tr>
<td headers="Name: Jane" id="jane-data">Jane</td>
<td headers="Rollno">031717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Show Headers Value</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = document.querySelector('#jane-data').headers;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau:
Nhấp vào “ Hiển thị giá trị tiêu đề ”Để hiển thị giá trị của thuộc tính headers của Jane hàng.
