Table

Index

  1. HTML Table
  2. Html Table Tags
  3. Width and Border
  4. Cell padding
  5. Cell spacing
  6. BGCOLOR
  7. COLSPAN and ROWSPAN

HTML Table

An HTML <table> tags are used to create different table in our web pages. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Html Table Tags

Tag Description
<table> Displays a table
<th> Represents a header cell in a table
<tr> A row in a table
<td> A cell in a table
<col> Specifies column properties for each column within a <colgroup> element
<caption> A table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Example: 
<!DOCTYPE html>
<html>
  <body>
    <table border="1">
      <tr>
        <th>Student Name</th>
        <th>Subject</th>
        <th>Marks</th>
      </tr>
      <tr>
        <td>Ram</td>
        <td>HTML</td>
        <td>87</td>
      </tr>
      <tr>
        <td>Shyam</td>
        <td>HTML</td>
        <td>73</td>
      </tr>
    </table>
  <body>
</html>
Output:

Width and Border Attribute

Use the style attribute with the width or height properties to specify the size of a table, row or column.
To add a border, use the CSS border property on table, th, and td elements:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border:1px solid black;
        border-collapse: collapse;
      }
      </style>
  </head>
  <body>
    <h2>Set the first column to 70% of the table width</h2>
    <table style="width:100%">
      <tr>
        <th style="width:70%">Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>
Output:

Cell padding

Cell padding is the space between the cell edges and the cell content. By default, the padding is set to 0. To add padding on table cells, use the CSS padding property:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      th, td {
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Cellpadding</h2>
    <p>Cell padding specifies the space between the cell content and its borders.</p>
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>
Output:

Cell spacing

Cell spacing is the space between each cell. By default the space is set to 2 pixels. To change the space between table cells, use the CSS border-spacing property on the table element:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;
      }
      table {
        border-spacing: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Cellspacing</h2>
    <p>Change the space between the cells with the border-spacing property.</p>
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
      </tr>
    </table>
  </body>
</html>
Output:

BGCOLOR

The background-color property sets the background color of an element.

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border:1px solid black;
        background-color: rgb(255,100,100);
      }
    </style>
  </head>
  <body>
    <h2>define bgcolor/ background color</h2>
    <table style="width:100%">
      <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
      </tr>
      <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
      </tr>
    </table>
  </body>
</html>
Output:

COLSPAN and ROWSPAN

To make a cell span over multiple columns, use the colspan attribute:
To make a cell span over multiple rows, use the rowspan attribute:

Example: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h2>Cell that spans two rows</h2>
    <p>To make a cell span more than one row, use the rowspan attribute.</p>
    <table style="width:100%">
      <tr>
        <th>Name</th>
        <td>Jill</td>
      </tr>
      <tr>
        <th rowspan="2">Phone</th>
        <td>555-1234</td>
      </tr>
      <tr>
        <td>555-8745</td>
      </tr>
    </table>
    
    <h2>Cell that spans two columns</h2>
    <p>To make a cell span more than one column, use the colspan attribute.</p>
    <table style="width:100%">
      <tr>
        <th colspan="2">Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>43</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>57</td>
      </tr>
    </table>
  </body>
</html>
Output:

Comments

Post a Comment

Popular posts from this blog

Adding Graphics to HTML Documents

Image
Index Graphics to HTML Img in HTML Img Attributes Border Attribute Width and Height Attribute Aligh Attribute Alt Attribute Graphics to HTML In the beginning, graphics was not supported by the web pages only texts are used. But later on images and other types of multimedia files are embedded with web pages. Img in HTML The graphics are embedded in a HTML pages using a simple tag which is represented by <IMG>. We can also embed the images inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag. IMG Attributes ...
Read more

Introduction to HTML

Image
Index Web Server Web Client/Browser Hyper Text Markup Language - HTML HTML Tags Types of Tags in HTML (Paired and Singular tags) Commonly used HTML Commands Title Footer Text Formatting Web Server Web server is dedicated computers that uses HTTP to serve web pages. the web server has an IP address and a domain name. By entering URL https:www.mk7college.com/index.html in the browser, it requests to the webserver having a domain name, "mk7college.com". The server in response fetches the page named index.html to the browser. Any computer can act as a web server after installing server software on it There are many web server software, like public domain software and commercial packages. Web server working The web server responds to the client's re...
Read more