Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM TableData colSpan Property

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:

HTML DOM TableData colSpan Property

Nhấp vào “ Span Footer ”Để kéo dài chân trang của bảng qua hai cột.

HTML DOM TableData colSpan Property