Rakshambika

Posted on Jul 18

Day 7 of Learning HTML

#webdev #vscode #beginners #basic

This is my day 7 of HTML journey. Today, I learned about the Table in HTML.

HTML TABLE:

Table is used to organize and display the data in row and column format.

<table> tag is used to create a Table on a webpage.

Basic Table Tags:

<table> - used to create a table.

<caption> - used to provide a title to the table.

<thead> - used to represent the header section of the table.

<tbody> - used to represent the body content in the table.

<tfoot> - used to represent the footer section of the table.

<tr> - used to represent the table row.

<th> - used for the header data, it automatically bolds and center the content.

<td>- used to represent the table data.

<colgroup> - used to group one or more column in a table. It is mainly used for styling purpose.

<col> - used inside the <colgroup> tag, to specify the properties.

Table Attributes:

colspan - used to merge the cells horizontally.

rowspan - used to merge the cells vertically.

cellspacing - used to provide the space between cells.

cellpadding - used to provide space between the cell border and cell data.

border - used to provide the border around the table.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Table</title>
    <link rel="stylesheet" href="./Table.css">
</head>
<body>
    <h1>Time Table</h1>
    <table>
        <colgroup>
        <col span="1" id="First">
        <col span="2" id="Middle">
        <col id="lastcolumn">
        </colgroup>
        <thead>
            <tr>
                <th rowspan="3">Day</th>
                <th colspan="3" id="seminar">Seminar</th>
            </tr>

            <tr>
                <th colspan="2">Schedule</th>
                <th rowspan="2">Topic</th>
            </tr>

            <tr>
                <th>Begin</th>
                <th>End</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="2">Monday</td>
                <td rowspan="2">8:00 a.m</td>
                <td rowspan="2">5.00 p.m</td>
                <td>Introduction to XML</td>
            </tr>

            <tr>
                <td>Validity: DTD and Relax NG</td>
            </tr>

            <tr>
                <td rowspan="3">Tuesday</td>
                <td >8:00 a.m</td>
                <td >11:00 a.m</td>
                <td rowspan="2">XPath</td>
            </tr>

            <tr>
                <td>11:00 a.m</td>
                <td>2:00 p.m</td>
            </tr>

            <tr>
                <td>2:00 p.m</td>
                <td>12:00 p.m</td>
                <td >XSL Transformations</td>
            </tr>

            <tr>
                <td>Wednesday</td>
                <td>8:00 a.m</td>
                <td>12:00 p.m</td>
                <td>XSL Formatting Objects</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS:

table,th,td{
    border: solid 1px black;
    text-align: center;
    border-collapse: collapse;
}

table{
    width: 1300px;
    height: 400px;
    margin-left: 500px;
    margin-top: 50px;
    font-size: 25px;
    color: aliceblue;
}

td,th{
    padding: 8px;
}

h1{
    text-align: center;
    font-size: 40px;
    color: rgb(5, 115, 31);
    text-decoration: underline;
}

#First{
    background-color: rgb(199, 60, 130);
}

#Middle{
    background-color: rgb(80, 235, 80);
}

#seminar{
    background-color: rgb(238, 34, 82);
}

#lastcolumn{
    background-color:rgb(221, 65, 224) ;
}

Output:

Stay tuned for more updates and exciting web development concepts!

DEV Community