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
  • Courses
    • DSA Courses
    • Programming Languages
  • Tutorials
    • Python Tutorial
      • Python Loops and Control Flow
    • Java
      • Java Interview Questions
      • Java Quiz
      • Advance Java
    • Programming Languages
    • System Design
    • Interview Corner
    • Computer Science Subjects
    • DevOps
    • Linux
    • Software Testing
    • Databases
    • Android
    • Excel
    • Mathematics
  • DSA
    • Data Structures
    • 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
  • 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 rowspan Attribute Last Updated : 29 Aug, 2024 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

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:1pxsolidblack; 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:1pxsolidblack; 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
  • Edge 
  • Firefox
  • Opera
  • Safari

HTML rowspan Attribute – FAQs

What is the default value of the rowspan attribute?

The default value of the rowspan attribute is 1.

Can rowspan be combined with the colspan attribute?

Yes, rowspan and colspan can be combined to span across multiple rows and columns.

What happens if the rowspan value is greater than the available rows?

If rowspan exceeds the available rows, the browser may not display the table correctly.

How does the rowspan attribute affect table layout?

rowspan merges multiple rows into a single cell, affecting the layout and alignment of table cells.

Does the rowspan attribute work with <th> elements?

Yes, rowspan can be used with <th> elements to span headers across multiple rows.

V

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

Similar Reads

HTML | rowspan Attribute The HTML <th> rowspan Attribute is used to specify how many numbers of header row cell will span. Syntax: <th rowspan="number"> Attribute Value: number: It contains the numeric value which specifies the number of rows the header cell should span. Example: C/C++ Code <!DOCTYPE html> <html> <head> <title> HTML th r 1 min read HTML | <td> rowspan Attribute The HTML <td> 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 <mtd> tag only. Syntax: <element rowspan="non-negative-int"> 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 (<a>) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like <img> and <script>, 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 <a> Tag ? The target and rel attributes in the <a> (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 | <html> xmlns Attribute The HTML <html> 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: <html xmlns="http://www.w3.org/1999/xhtml"> Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d 1 min read HTML | scoped Attribute The HTML scoped attribute is a boolean attribute that is used to specify that the styles only apply to this element's parent element and that element's child elements (not the entire document).Note : It is a deprecated attribute and it is not supported by HTML5. Supported tag: style Example: C/C++ Code <!DOCTYPE html> <html> <head 1 min read HTML | <th> valign Attribute The HTML <th> valign Attribute is used to specify the vertical alignment of text content in a header cell. It is not supported by HTML 5. Syntax: <th valign="top | middle | bottom | baseline"> Attribute Value: top: It sets the table header content to top-align. middle: It sets the table header content to middle-align. bottom: It sets th 1 min read HTML | <col> align Attribute The HTML <col> align Attribute is used to set the horizontal alignment of text content inside the col element. It is not supported by HTML 5. Syntax: <col align="left | right | center | justify | char"> Attribute Values: left: It sets the text left-align. right: It sets the text right-align. center: It sets the text center-align. justif 1 min read HTML | poster Attribute The HTML poster Attribute is used to display the image while video downloading or when the user clicks the play button. If this image not set then it will take the first frame of video as a poster image.Applicable: It is mainly used in <video> element. Syntax: <video poster="URL"> Attribute Values: It contains a single value URL which s 1 min read HTML | <area> target Attribute The HTML <area> target Attribute is used to specify where to open the linked document. It works only when href attribute is present in the area elements. Syntax: <area target="_blank|_self|_parent|_top|framename"> Attribute Values: _blank: It opens the link in a new window._self: It is the default value. It opens the linked document in 1 min read HTML | <select> autocomplete Attribute The HTML <select> autocomplete attribute is used to specify that the form has autocompleted on or off. When the autocomplete attribute is set to on the browser will automatically complete the values based on which the user entered before. Syntax: <select autocomplete="on | off"> Attribute Values: on: It is the default value. When the au 1 min read HTML | <table> bgcolor Attribute The HTML <table> bgcolor Attribute is use to specify the background color of a table.Syntax: <table bgcolor="color_name | hex_number | rgb_number"> Attribute Values: color_name: It sets the text color by using the color name. For example "red".hex_number: It sets the text color by using the color hex code. For example "#0000ff".rgb_numb 1 min read HTML | srcdoc Attribute The HTML srcdoc attribute is used to specify the HTML content of the page to show in the inline frame. This attribute is anticipated to be used beside the sandbox and seamless attributes. If a browser supports the srcdoc attribute, it'll override the content laid out in the src attribute (if present). If a browser doesn't support the srcdoc attribu 1 min read HTML <video> crossorigin Attribute The HTML crossorigin attribute is used in the <video> element that supports a CORS request when we tried to fetch out the video files from the third-party servers or from another domain. Syntax: <video crossorigin="anonymous | use-credentials"> Attribute Values: anonymous: It has a default value. It defines a CORS request that will be s 1 min read HTML | Marquee truespeed attribute If the scrolldelay value less then 60 and truespeed mode is on then the value of scrolldelay is not effecting the scrolling. If the scrolldelay value more then 60 and truespeed mode is on then the truespeed is not effecting the scrolling. So, basically it is used to set scrollDelay attribute should be taken as an exact value or not.Syntax: <marq 1 min read What is the significance of adding autocomplete attribute in HTML Form ? The HTML <form> autocomplete attribute is used to specify that the form has autocompleted on or off value. When the autocomplete attribute is set to "on", the browser will automatically complete the values based on which the user entered before. Syntax: <form autocomplete="on|off"> Attribute values: on: It has a default value. When the 1 min read HTML | <td> abbr Attribute The HTML <td> abbr attribute is used to specify the shorter version of the content. This attribute is not supported by HTML 5. It does not describe any visual effect but it is used by screen readers. Syntax: <td abbr="text"> Attribute Values: text: It contains the short description of cell content. Note : This attribute is not supported 1 min read HTML reversed Attribute It is a Boolean Attribute and is used to order the list in Descending Order(9, 8, 7, 6 .....) instead of ascending order(1, 2, 3 ....). Syntax: <ol reversed> <li> Content... </li> <li> Content... </li> ... <li> Content... </li></ol>Applicable: <ol> Attributes: It includes single attributes rever 1 min read HTML onsearch Event Attribute This onsearch attribute works when a user presses the ENTER button or clicks on the x button. This event works with <input> element. Supported Tags: <input type="search">Syntax: <element onsearch="script">Attribute: This event contains single attribute script which contains the script to be run when event call. Example: C/C++ Code 1 min read HTML oninput Event Attribute This attribute works when it gets user input value. This attribute mainly fires when the user change the value of <input> and <textarea> element. This attribute is quite similar to onchange attribute but the basic difference is that the oninput event attribute occurs immediately when the value of the element changes while the onchange a 1 min read HTML | onmouseup Event Attribute This attribute fires when a mouse button is released over the element. The order of events occur related to the onmouseup event. onmousedownonmouseuponclick Supported Tags: All HTML elements, EXCEPT: <base> <bdo><br><head><html><iframe><meta><param><script><style> <title> Syntax: 1 min read HTML | onwheel Event Attribute This attribute works when the wheel of pointer device is rolled up or down over an element. The onwheel attribute also works when the user scrolls or zooms on an element by using mouse or touchpad. Supported Tags: It supports all HTML elements. Syntax: <element onwheel = "script"> Attribute Value: This attribute contains single value script a 1 min read HTML | oncontextmenu Event Attribute This attribute works when the user right-clicks on an element to open the context menu.Supported Tags: It supports all HTML elements. Syntax: <element oncontextmenu="script"> Attribute Value: This attribute contains single value script. The script to be run when oncontextmenu attribute called. It is supported by all HTML elements.Note: This a 1 min read HTML | <iframe> width Attribute The HTML <iframe> width attribute is used to specify the width of the <iframe> in terms of pixels. Syntax: <iframe width="pixels"> Attribute Values: It contains single value pixel which specifies the width of the iframes in terms of pixels. Below example illustrates the use of <iframe> width attribute in HTML: Example: C/C++ 1 min read HTML <a> ping Attribute The HTML <a> ping Attribute is generally used to either specify a particular URL or a list of URLs that will be notified when the user will click on the hyperlink passed int HTML <a> href Attribute. This is achieved by sending a short HTTP post request to the specified URL as soon as the user clicks on the hyperlink. Syntax : <a href 1 min read Article Tags :
  • HTML
  • Web Technologies
  • HTML-Attributes
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 Suggest changes 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 min 4 words, max CharLimit:2000

What kind of Experience do you want to share?

Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences

Từ khóa » Html Table Rowspan Colspan Examples