how to create html table? learn with example.

hello ninjas..✋
i'm your host nil jadav in this post we learn how to make html table  and know about his attributes and design 

what is html table?

➔in html table is use to show tabular data view  it use to arranging data in table formate like product  financial reports, customer's details,listings.
➔in short table use to create table😝its true..

define html table!

➔html table tag is define with <table>
➔and table tag closing with </table> 

what is table row in html table<tr>?

➔table row is a one row and its define with <tr>
➔table is created by a row as you know😇

what is table data in html table<td>? 

➔ in html table data is a cell like row and column make a cell and this cell store data so td is a row&column  centered data  it called table data 
➔in html table data is use to show data in table cell

What are the html table attributes in HTML?

 ➔here is some common attribute of html table👇
  • border : <border="2">
  • ColumnsSpan : <Td COLSPAN=2>
  • RowsSpan : <TH ROWSPAN=2> 
  • bgcolor : <bgcolor="red">
  • Width : <Td WIDTH="100">
  • align : <align="left">
  • cell-spacing : <cellspacing="15">

 what is rowspan and colspan in html table?

➔rowspan is a merge row is called rowspan in html table
➔colspan is a merge column is  called colspan in html table
ex:  


basic html table example!

code:-
<!DOCTYPE html>
<html>
<head>
    <title>html table</title>
</head>
<body>

<h2>Basic HTML Table</h2>

<table border="2">
  <tr>
    <td>Firstname</td>
    <td>Lastname</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

</table>
<a href=""></a>
</body>
</html>

👀 output:

example 2:-

create login & sign-in form using html to learn click this

code:-

<!DOCTYPE html>
<html>
<head>
    <title> html table rowspan and colspan </title>
</head>
<body text="white">

<h2>learn rowspan and colspan in html tbale</h2>
<p>its use to merge row and column</p>

<table border="2" bgcolor="black">
  <tr>
    <th>full name:</th>
    <td>Anil jadav</td>
  </tr>
  <tr>
    <th rowspan="2">mobile number:</th>
    <td>78744***90</td>
  </tr>
  <tr>
    <td>8849*****21</td>
  </tr>
  <tr>
  <td colspan="2" align="center"> bio data</td>
  </tr>
</table>

</body>
</html>
 

👀 output:

 

 exampele 3:-

chesstable with html table:-

code:-
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body bgcolor="silver">
    <table border="1" bgcolor="blue" cellspacing="9" align="center">
        <tr>
            <td  bgcolor="black" width="30" height="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
   
        </tr>
        <tr>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
        </tr>
<tr>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
   
        </tr>
        <tr>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
        </tr>
<tr>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
   
        </tr>
        <tr>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
        </tr>
<tr>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
   
        </tr>
        <tr>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
            <td  bgcolor="white" width="30" height="30""></td>
            <td  bgcolor="black" width="30" height="30"></td>
        </tr>

       

    </table>
</body>
</html>
note:- coding is long but very esay  dont scare😁 just write one <tr> and 8 <td> and copy and past 7 times (total 7 row and in one row 7 <td>).
example 4:-lets make tick tac game with html table👅

preview:-

code:-
<!DOCTYPE html>
<html>
<head>
    <title>tiktak</title>
</head>
<body background="19682.jpg">
    <table align="center" border="1" cellspacing="10" bgcolor="silver">
        <tr>
            <td> <select>
               
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
           
            </td>
        </tr>
        <tr>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
        </tr>
        <tr>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
            <td> <select>
                <option value="" selected=""></option>
              <option value="#">#</option>
              <option value="@">@</option>

            </select>
            </td>
        </tr>

    </table>
</body>
</html>

example 6:-
lets make a difficult html table 
preview:-
code:-
<!DOCTYPE html>
<html>
<head>
    <title>table ex-2</title>
</head>
<body text="white" bgcolor="seablue">
    <center>
    <h4>www.niljadav.com visit must once time</h4>
        <table border="2" cellspacing="7" bgcolor="black">
                <tr>
                    <td align="center" colspan="2" rowspan="2">1</td>
                    <td align="center" colspan="2">2</td>
                    <td align="center" rowspan="4">3</td>
                </tr>           
                <tr>
                    <td align="center" rowspan="2" colspan="2">6</td>
                </tr>
                <tr>
                    <td align="center" rowspan="2">4</td>
                    <td align="center" rowspan="2">5</td>
                </tr>
                <tr>
                    <td align="center">7</td>
                    <td align="center" width="0"></td>
                </tr>
        </table>
</center>
</body>
</html>

thanks for  spendig your time on our site
👍any suggestion or qution pleaase mail us on [email protected]
or comment us
💬if you like us then follow on social media..
ANIL JADAV