What is HTML (Hyper text markup language) table ?

 What is HTML (Hyper text markup language) table ? 


HTML(Hyper text markup language) table tag is used to display data in tabular form (row * column). There can be many columns in a row.there can be many columns in row .


We can create a table to display data in tabular form, using <table> element, with the help of <tr> table row , <td>table data , and <th>table header  elements.


In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.



HTML TABLE IS USED FOR 

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page . The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default



The <table> tag defines an HTML table.


Each table row is defined with a <tr> tag. 


Two attribute of < tr > is used to make table in HTML


Each table header is defined with a <th> tag.


 Each table data/cell is defined with a <td> tag.


By default, the text in <th> elements are bold and centered.


By default, the text in <td> elements are regular and 

left-aligned.




Example of HTML Table (Source code)


<p>Simple table with header</p>

<table>

  <tr>

    <th>First name</th>

    <th>Last name</th>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

  </tr>

  <tr>

    <td>Jane</td>

    <td>Doe</td>

  </tr>

</table>


<p>Table with thead, tfoot, and tbody</p>

<table>

  <thead>

    <tr>

      <th>Header content 1</th>

      <th>Header content 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Body content 1</td>

      <td>Body content 2</td>

  </tbody>

  <tfoot>

    <tr>

      <td>Footer content 1</td>

      <td>Footer content 2</td>

    </tr>

  </tfoot>

</table>


<p>Table with colgroup</p>

<table>

  <colgroup span="4"></colgroup>

  <tr>

    <th>Countries</th>

    <th>Capitals</th>

    <th>Population</th>

    <th>Language</th>

  </tr>

  <tr>

    <td>USA</td>

    <td>Washington, D.C.</td>

    <td>309 million</td>

    <td>English</td>

  </tr>

  <tr>

    <td>Sweden</td>

    <td>Stockholm</td>

    <td>9 million</td>

    <td>Swedish</td>

  </tr>

</table>


<p>Table with colgroup and col</p>

<table>

  <colgroup>

    <col style="background-color: #0f0">

    <col span="2">

  </colgroup>

  <tr>

    <th>Lime</th>

    <th>Lemon</th>

    <th>Orange</th>

  </tr>

  <tr>

    <td>Green</td>

    <td>Yellow</td>

    <td>Orange</td>

  </tr>

</table>


<p>Simple table with caption</p>

<table>

  <caption>Awesome caption</caption>

  <tr>

    <td>Awesome data</td>

  </tr>

</table>



e.g : 2 rows and 3 columns table in HTML ( source code ) 


HTML 5 Table using creating structure on  web pages

An HTML structure for creating rows and columns on a Web page. The Table tag defines the overall table and the Table Row (TR) tag is used to build each row. The Table Data (TD) tag defines the actual data. Prior to HTML5, tables were often used for virtually every element on the page. To conform to HTML5, tables should be used only for tabular data.

Comments

Post a Comment

Last 7 Days

What is the syntax of src Attribute with < img > tag in HTML ?

 What is the syntax of src Attribute with < img > tag in HTML ? Syntax <img src="URL">  URL is stand for URL of the image. we can choose two types of url an absolute url and the second one is the Relative url  Two types of URL when we use < img > tag with  src attribute   An Absolute URL - Absolute url we use to   points to another website or web url or web page  Example of Absolute URL  (e.g:-   src ="https://www.tech.thinkforu.org/ HTML5.png ") Relative URL - Relative URL We use to Points to a file  within a web site or web page Example of Relative URL  (e.g:-  src="techforum.gif")
Read more

How to write html code for email signature ?

 How to write html code for email signature ? <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head>     <meta charset="utf-8"> <!-- utf-8 works for most cases -->     <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->     <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->     <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->     <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->     <!-- Web Font / @font-face : BEGIN -->     <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely rem...
Read more

How to use referrerpolicy Attribute value ( unsafe-url ) with < iframe > tag in HTML ? with example

How to use referrerpolicy Attribute value ( unsafe-url ) with < iframe > tag in HTML ? with example Referrerpolicy Attribute value ( unsafe-url ) used for   Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe Example <html> <body> <h1>The iframe referrerpolicy attribute Example</h1> <iframe src="https://tech.thinkforu.org "  referrerpolicy=" unsafe-url  "> </iframe> </body> </html>
Read more

How to use sandbox attribute value ( allow-popups-to-escape-sandbox ) with < iframe > tag in HTML ? with example

 How to use sandbox attribute value ( allow-popups-to-escape-sandbox ) with < iframe >  tag in HTML ? with example  Sandbox attribute value  ( allow-popups-to-escape-sandbox )   <iframe sandbox="...">`   which will allow a sandboxed document to spawn new windows without forcing the sandboxing flags upon them. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon a landing page. Allows popups to open new windows without inheriting the sandboxing  Example <body> <iframe src="tech.thinkforu.org"  sandbox=" allow-popups-to-escape-sandbox "> </iframe> </body>
Read more

How to use comments in Solidity programming language ?

 How to use comments in Solidity programming language ?  function getResult() public view returns(uint) {    // This is a comment. It is similar to comments in C++    /*       * This is a multi-line comment in solidity       * It is very similar to comments in C Programming    */    uint a = 1;    uint b = 2;    uint result = a + b;    return result; }
Read more