How to create table cell using HTML5 ?

How to create a table row using HTML?

Last Updated : 19 Jun, 2024

Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements.

Syntax:

<tr> ... </tr>

Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody> section of the table. Each <tr> tag encloses table cells that define the content for each column. Use CSS for styling, ensuring consistent borders and alignment across cells and headers.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to define row of a table
    </title>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        th {
            color: blue;
        }

        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <center>

        <h2>
            Define
            a row in a table
        </h2>
        <table>
            <thead>
                <!-- tr tag starts here -->
                <tr>
                    <th>Name</th>
                    <th>User Id</th>
                </tr>
                <!-- tr tag end here -->
            </thead>
            <tbody>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>

</html>

Output:

tablerow — Output

Supported Browsers

Google Chrome: 129
Firefox: 130
Opera: 110
Safari: 17.6

How to create table cell using HTML5 ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to create table cell using HTML5 ?

In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: <!DOCTYPE html> <html> <head> <

How to Create Header Cell in a Table using HTML?

A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default. Syntax <th> Conten

How to Create Table in HTML?

HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable Elements Description <table> The <table> element

How to define a table caption using HTML ?

In this article, we define a table caption by using the <caption> tag element. The caption element is used to specify the caption of a table. This tag will be inserted just after the table tag. Only one caption can be specified for one table. It is by default aligned to the center. Syntax:

How to Create Time-Table Schedule using HTML?

A time table or schedule is essential for organizing tasks, events, or classes. Weâ€™ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t

How to group header content of a table using HTML5 ?

In this article, we define to group the header content in a table by using the <th> tag in HTML to set the header cell of a table. Two types of cells in an HTML table. Header Cell: It is used to hold the header information. Standard Cell: It is used to hold the body of data. The working of bot

How to Create Table Border in HTML ?

In HTML, we can represent the data in the tabular format by using the <table> tag. We can customize the table by creating a border with different widths and colors. Below are the approaches to create a Table Border in HTML: Table of Content Using HTML Table Tag AttributesUsing HTML Inline Styl

How to make a Animated Table using HTML and CSS ?

Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS. Approa

How to create an HTML element using jQuery ?

In this article, we will see how to create an HTML element using jQuery. To create and append the HTML element, we use the jQuery append() method. The jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html)

How to create a table in ReactJS ?

In ReactJS, tables are commonly used to display data in rows and columns. Tables can be static, where data is hardcoded, or dynamic, where data is passed from an array or fetched from an API. React makes it simple to create interactive and dynamic tables, with additional features such as sorting, pa