HTML Tables




  • The <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Syntax of HTML Table

<table>
  // table content
</table>

Key Elements of HTML Table

  • <table>: Defines the table itself.
  • <tr>: Used for table rows.
  • <th>: Used for table headings.
  • <td>: Used for table cells (data).

Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Harry</td>
    <td>100</td>
  </tr>
</table>

Rowspan Attribute

  •  If you want a table cell to span multiple rows, you can use the rowspan attribute.

<td rowspan="value">

Colspan Attribute

  •  If you want a table cell to span multiple columns, you can use the colspan attribute.

<td colspan="value">

Visual Representation of Rowspan and Colspan

Rowspan and Colspan in HTML tables

<table>
        <thead>
            <tr>
                <th colspan="7">timetable</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="6">hours</td>
                <td>Mon</td>
                <td>Tue</td>
                <td>Wed</td>
                <td>thr</td>
                <td>Fri</td>
                <td>Sat</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
            <tr>
                <td colspan="6">Lunch</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td rowspan="2">Games</td>
            </tr>
            <tr>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
                <td>math</td>
            </tr>
        </tbody>
    </table>





Related Posts:

  • HTML Working How do websites work?When a user sends a request to a server by typing  (www.devjunctionpoint.blogspot.com) on the internet or browseryour … Read More
  • HTML Page Structure Understanding the Structure of an HTML Document <!DOCTYPE html> // let browser know it's an HTML5 Document.<html> // Root of an… Read More
  • More on forms Common AttributesactionThe action attribute specifies the URL where the form data should be sent after submission.<form action="/su… Read More
  • HTML Introduction  What is HTML5?HTML stands for Hypertext Markup LanguageHypertext is Text which contains links to other textsmarkup language it's a way to … Read More
  • HTML Attributes What is an HTML Attribute?HTML attributes provide additional information about HTML elements. Attributes are always specified in the start … Read More

0 Comments:

Post a Comment

Do leave your comments