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

HTML DOM TableData rowSpan thuộc tính

Thuộc tính HTML DOM TableData rowSpan trả về và sửa đổi giá trị của thuộc tính rowspan của bảng trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

1. Trả lại hàngSpan

object.rowSpan

2. Thêm rowSpan

object.rowSpan = “number”

Hãy để chúng tôi xem một ví dụ về thuộc tính rowSpan -

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 rowSpan Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td id="elon">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Span Elon</button>
<script>
   function get() {
      document.querySelector('#elon').rowSpan = "2";
   }
</script>
</body>
</html>

Điều này sẽ tạo ra kết quả sau:

HTML DOM TableData rowSpan thuộc tính

Nhấp vào “ Span Elon ”Để kéo dài tên Elon qua hai hàng.

HTML DOM TableData rowSpan thuộc tính