HTML Tables

HTML Tables

HTML table tags are used to arrange data into rows and columns or to shown data in a table form. <table> tag defines an HTML table and it has a closing tag i.e. </table> and you can also add the text and align them using <tr., <td>, <th> tags with <table> tag.

Define an HTML Table:

  • <tr> – Defines table row
  • <th> – Defines table Header

Here is a simple HTML table Example:

<!DOCTYPE html>
 <html>
  <body>

    <h2> HTML Table: PrepareExams</h2>

     <table>
       <tr>
    <th> Firstname: </th>
    <th> Lastname: </th> 
    <th> Course: </th>
  </tr>
  <tr>
    <td>Yashreet</td>
    <td>Singh</td>
    <td> M.Sc.(Computer Science )</td>
  </tr>
  <tr>
    <td>Akashdeep</td>
    <td>Saharan</td>
    <td>B.Tech. (CS) </td>
  </tr>
  <tr>
    <td> Jaskiran </td>
    <td> Singh </td>
    <td> MCA (CS) </td>
  </tr>
</table>

</body>
</html>

Output Here:

HTML Table: PrepareExams

Firstname: Lastname: Course:
Yashreet Singh M.Sc.(Computer Science )
Akashdeep Saharan B.Tech. (CS)
Jaskiran Singh MCA (CS)

How to Add a Border in HTML Table (HTML Table attributes)

We will use the CSS border property for adding a border to an HTML table. for example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid red;
}
</style>
</head>
  <body>

    <h2> HTML Table: (Add a Border) PrepareExams </h2>

     <table>
       <tr>
    <th> Firstname: </th>
    <th> Lastname: </th> 
    <th> Course: </th>
  </tr>
  <tr>
    <td>Yashreet</td>
    <td>Singh</td>
    <td> M.Sc.(Computer Science )</td>
  </tr>
  <tr>
    <td>Akashdeep</td>
    <td>Saharan</td>
    <td>B.Tech. (CS) </td>
  </tr>
  <tr>
    <td> Jaskiran </td>
    <td> Singh </td>
    <td> MCA (CS) </td>
  </tr>
</table>
</body>
</html>

Output Here:

HTML Table: (Add a Border) PrepareExams

Firstname: Lastname: Course:
Yashreet Singh M.Sc.(Computer Science )
Akashdeep Saharan B.Tech. (CS)
Jaskiran Singh MCA (CS)


HTML Table with Colspan

It divides the cell or row into multiple columns and the number of columns. colspan=”value” attribute is used for Table Colspan.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid red;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>HTML Table with Colspan </h2>

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td> Yashpreet Singh </td>
    <td> 123467890 </td>
    <td> 9876543210 </td>
  </tr>
</table>

</body>
</html>

Output Here:

HTML Table with Colspan

Name Contact
Yashpreet Singh 123467890 9876543210

HTML Table with Rawspan

It divides the cell or row into multiple rows and the number of rows. rawspan=”value” attribute is used for Table Rawspan.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>HTML Rawspan: PrepareExams </h2>

<table>
  <tr>
    <th>Name:</th>
    <td> Yashpreet Singh </td>
  </tr>
  <tr>
    <th rowspan="2">Contact:</th>
    <td>9856896558</td>
  </tr>
  <tr>
    <td>784512639</td>
  </tr>
</table>

</body>
</html>

Output Here:

HTML Rawspan: PrepareExams

Name: Yashpreet Singh
Contact: 9856896558
784512639

List of tags that are used in the table.

S.N.TagsDescription
1.<table>defines the table
2.<tr>defines the row in the table
3.<th>defines a header cell in the table
4.<td>defines a cell in the table
5.<caption>defines the table caption
6.<colgroup>specifies a group of one or more columns in table formatting
7.<col>specifies column properties for each column
8.<tbody>groups the body content in a table
9.<thead>groups the header content in a table
10.<tfooter>groups the footer content in a table

HTML Tables 1
Yashhuuhttps://www.prepareexams.com
I love To Write Articles, I Write articles in many fields technology, news, educations, exams, gadgets reviews, coding, Apps. Facebook

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Latest Articles