Thuộc tính colSpan của HTML DOM TableData trả về và sửa đổi giá trị của thuộc tính colspan của một bảng trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả lại colSpan
object.colSpan
2. Thêm colSpan
object.colSpan = “number”
Hãy để chúng tôi xem một ví dụ về thuộc tính colSpan -
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;
}
</style>
<body>
<h1>DOM TableData colSpan Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="span-row">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="get()" class="btn">Span Footer</button>
<script>
function get() {
document.querySelector('#span-row').colSpan = "2";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau:
Nhấp vào “ Span Footer ”Để kéo dài chân trang của bảng qua hai cột.
