HTML | Rowspan Attribute - GeeksforGeeks

Trang chủ » Html Table Rowspan Colspan Examples » HTML | Rowspan Attribute - GeeksforGeeks

Có thể bạn quan tâm

Skip to content geeksforgeeks
  • Tutorials
    • Python Tutorial
      • Python Data Types
      • Python Loops and Control Flow
      • Python Data Structures
      • Python Exercises
    • Java
      • Java Programming Language
        • OOPs Concepts
      • Java Collections
      • Java Programs
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
      • System Design Tutorial
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
      • Linked List
      • Tree
    • Algorithms
      • Analysis of Algorithms
      • Searching Algorithms
      • Sorting Algorithms
    • Practice
      • Company Wise Coding Practice
      • Practice Problems Difficulty Wise
      • Language Wise Coding Practice
      • Curated DSA Lists
    • Company Wise SDE Sheets
    • DSA Cheat Sheets
    • Puzzles
  • Data Science
    • Data Science Packages
    • Data Visualization
    • Data Analysis
  • Web Tech
    • Web Development Using Python
      • Django
      • Flask
    • Cheat Sheets
  • Courses
    • DSA Courses
    • Programming Languages
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
▲ Open In App
  • HTML accept Attribute
  • HTML accept-charset Attribute
  • HTML accesskey Attribute
  • HTML action Attribute
  • HTML align Attribute
  • HTML alt attribute
  • HTML | async Attribute
  • HTML autocomplete Attribute
  • HTML autoplay Attribute
  • HTML autofocus Attribute
  • HTML bgcolor Attribute
  • HTML border attribute
  • HTML | charset Attribute
  • HTML checked Attribute
  • HTML | cite attribute
  • HTML Class Attribute
  • HTML cols Attribute
  • HTML colspan Attribute
  • HTML | content Attribute
  • HTML contenteditable Attribute
  • HTML | controls Attribute
  • HTML | coords Attribute
  • HTML | data Attribute
  • HTML | data Attribute
  • HTML datetime Attribute
  • HTML | default Attribute
  • HTML | defer Attribute
  • HTML dir Attribute
  • HTML | dirname Attribute
  • HTML | disabled Attribute
  • HTML | download Attribute
  • HTML draggable Attribute
  • HTML | dropzone Attribute
  • HTML enctype Attribute
  • HTML | for Attribute
  • HTML form Attribute
  • HTML formaction Attribute
  • HTML headers attribute
  • HTML height Attribute
  • HTML hidden Attribute
  • HTML | high Attribute
  • HTML href Attribute
  • HTML hreflang Attribute
  • HTML | http-equiv Attribute
  • HTML Id Attribute
  • HTML | ismap Attribute
  • HTML | kind Attribute
  • HTML label Attribute
  • HTML lang Attribute
  • HTML list Attribute
  • HTML | loop Attribute
  • HTML | low Attribute
  • HTML max attribute
  • HTML maxlength Attribute
  • HTML media attribute
  • HTML | method Attribute
  • HTML min Attribute
  • HTML | multiple Attribute
  • HTML | muted Attribute
  • HTML name Attribute
  • HTML | novalidate Attribute
  • HTML | onblur Attribute
  • HTML oncopy Attribute
  • HTML oncut Attribute
  • HTML | onkeypress Attribute
  • HTML | onmousedown Attribute
  • HTML onscroll Attribute
  • HTML Optimum Attribute
  • HTML | pattern Attribute
  • HTML placeholder Attribute
  • HTML readonly Attribute
  • HTML required Attribute
  • HTML reversed Attribute
  • HTML | rows Attribute
  • HTML rowspan Attribute
  • HTML selected Attribute
  • HTML size Attribute
  • HTML | srclang Attribute
  • HTML | start Attribute
  • HTML | step Attribute
  • HTML style attribute
  • HTML tabindex Attribute
  • HTML | target Attribute
  • HTML title Attribute
  • HTML5 translate Attribute
  • HTML | value Attribute
  • HTML | wrap Attribute
HTML rowspan Attribute Last Updated : 16 Jan, 2024 Improve Improve Like Article Like Save Share Report

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.

Note: The rowspan attribute when used with <td> tag determines the number of standard cells it should span. 

Syntax:

<td rowspan = "value">table content...</td>

Usage

It can be used with <td> and <th> elements in an HTML Table. 

Attribute Values:

Attribute Values

Description

number

Indicates how many rows a cell should cover. Using `rowspan=”0″` instructs the browser to extend the cell to the last row of the table section (thead, tbody, or foot).

Using with <td> tag

The rowspan attribute when used with <td> tag determines the number of standard cells it should span. 

Syntax:

<td rowspan = "value">table content...</td>// The value specifies the number of rows that the cell fills and it must be integer

Example: The implementation of rowspan attribute with the td attribute

html

<!DOCTYPE html> <html> <head> <title>HTML rowspan Attribute</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; } </style> </head> <body style="text-align:center"> <h1 style="color: green;">GeeksforGeeks</h1> <h2>HTML rowspan Attribute</h2> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Ajay</td> <!-- This cell will take up space on two rows --> <td rowspan="2">24</td> </tr> <tr> <td>Priya</td> </tr> </table> </body> </html>

Output: 

rowspan

Using with <th> tag

The rowspan attribute when used with <th> tag determines the number of header cells it should span. 

Syntax:

<th rowspan = "value">table content...</th>// The value specifies the number of rows that the cell fills and it must be integer

Example: The implementation of rowspan attribute with th attribute

html

<!DOCTYPE html> <html> <head> <title>HTML rowspan Attribute</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; } </style> </head> <body style="text-align:center"> <h1 style="color: green;">GeeksforGeeks</h1> <h2>HTML rowspan Attribute</h2> <table> <tr> <th>Name</th> <th>Age</th> <!-- This cell will take up space in 3 rows --> <th rowspan="3">GeeksforGeeks</th> </tr> <tr> <td>Arun</td> <td>24</td> </tr> <tr> <td>Priya</td> <td>25</td> </tr> </table> </body> </html>

Output: 

rowspan

Supported Browsers:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 1

V

Vishal Chaudhary 2 Follow Improve Previous Article HTML | rows Attribute Next Article HTML selected Attribute

Please Login to comment...

Similar Reads

HTML | rowspan Attribute The HTML &lt;th&gt; rowspan Attribute is used to specify how many numbers of header row cell will span. Syntax: &lt;th rowspan="number"&gt; Attribute Value: number: It contains the numeric value which specifies the number of rows the header cell should span. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML th r 1 min read HTML | &lt;td&gt; rowspan Attribute The HTML &lt;td&gt; rowspan Attribute is used to specify the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in the spreadsheet program 1 min read HTML5 MathML rowspan Attribute This attribute holds the value that how many rows does the cell extend. This attribute is accepted by the &lt;mtd&gt; tag only. Syntax: &lt;element rowspan="non-negative-int"&gt; Attribute Values: non-negative-int: This value holds the integer that create the span by rows. Below example illustrate the rowspan in HTML MathML: Example: C/C++ Code 1 min read HTML | DOM TableData rowSpan Property The DOM TableData rowSpan Property in HTML DOM is used to set or return the value of the rowspan attribute. The rowspan attribute in HTML specifies the number of rows a cell should span. Syntax: It returns the rowSpan property. tabledataObject.rowSpanIt is used to set the rowSpan property. tabledataObject.rowSpan = number Property Values: It contai 2 min read HTML DOM TableHeader rowSpan Property The HTML DOM TableHeader rowSpan property is used to set or return the value of the rowspan attribute. The rowspan attribute in HTML specifies the number of rows a cell should span. Syntax: It returns the rowspan property.tableheaderObject.rowSpanIt is used to set the rowSpan property.tableheaderObject.rowSpan = number Property Values: It contains 2 min read HTML Table Colspan and Rowspan In HTML, the rowspan attribute specifies how many rows a table cell should span, determining its vertical position. On the other hand, the colspan attribute specifies the number of columns a cell should span, determining its horizontal position. Defining together, they provide a powerful mechanism for cells to cover multiple rows and columns, offer 3 min read How href attribute is different from src attribute in HTML ? In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (&lt;a&gt;) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like &lt;img&gt; and &lt;script&gt;, specifies 1 min read When to use the class attribute and the id attribute ? The class attribute is used when multiple HTML elements share a common style or behaviour, allowing the application of a shared style to several elements. It promotes code reusability and is suitable for elements with similar characteristics. The id attribute is utilized when a unique identifier is needed for a specific HTML element. This identifie 1 min read How to use the target attribute and the rel attribute in the &lt;a&gt; Tag ? The target and rel attributes in the &lt;a&gt; (anchor) tag is used to control the behaviour of hyperlinks, specifying how the linked content should be opened and establishing relationships between the current and linked documents. Here's how to use these attributes: target Attribute:The target attribute determines where the linked content will be 2 min read HTML | &lt;html&gt; xmlns Attribute The HTML &lt;html&gt; xmlns Attribute is used to specify the xml namespace for a document. Important Note: This attribute is mainly required in XHTML, not valid in HTML 4.01, and optional in HTML 5. Syntax: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d 1 min read View More Articles Article Tags :
  • HTML-Attributes
  • HTML
  • Web Technologies
Like three90RightbarBannerImg Explore More We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy Got It ! Lightbox Improvement Please go through our recently updated Improvement Guidelines before submitting any improvements. This article is being improved by another user right now. You can suggest the changes for now and it will be under the article's discussion tab. You will be notified via email once the article is available for improvement. Thank you for your valuable feedback! Suggest changes Please go through our recently updated Improvement Guidelines before submitting any improvements. Suggest Changes Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal. geeksforgeeks-suggest-icon Create Improvement Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all. geeksforgeeks-improvement-icon Suggest Changes Suggestion[CharLimit:2000] Create Improvement

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences Can't choose a topic to write? click here for suggested topics Write and publish your own Article

Từ khóa » Html Table Rowspan Colspan Examples