************TABLES IN HTML*************************

***********************************RAW********************************************

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tables</title>
  </head>
  <body>
    <table border="black">
      <caption>
        Friends
      </caption>
      <tr>
        <th>Name</th>
        <th>Nickname</th>
      </tr>
      <tr>
        <td>Abhishek</td>
        <td>abhi</td>
      </tr>
      <tr>
        <td>Ashwith</td>
        <td>enugu</td>
      </tr>
      <tr>
        <td>Bharath</td>
        <td>Psychooo</td>
      </tr>
      <tr>
        <td>Vinay</td>
        <td>Bakkodu</td>
      </tr>
    </table>
  </body>
</html>

********************************USING SEMANTICS*********************************

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tables</title>
  </head>
  <body>
    <table border="black">
        <caption>Friends</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Nickname</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Abhishek</td>
          <td>Abhi</td>
        </tr>
        <tr>
          <td>Ashwith</td>
          <td>Enugu</td>
        </tr>
        <tr>
          <td>Bharath</td>
          <td>Psychoo</td>
        </tr>
        <tr>
          <td>Vinay</td>
          <td>Bakkodu</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

*********************************USING COLSPAN AND ROWSPAN********************

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table using rowspan and colspan</title>
  </head>
  <body>
    <table border="black">
      <caption>
        Food Menu
      </caption>
      <thead>
        <tr>
          <th rowspan="2">Item</th>
          <th colspan="2">Price</th>
        </tr>
        <tr>
          <th>INR</th>
          <th>USD</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Biryani</td>
          <td>170</td>
          <td>2</td>
        </tr>
        <tr>
          <td>Pizza</td>
          <td>150</td>
          <td>1.7</td>
        </tr>
        <tr>
          <td>french fries</td>
          <td>180</td>
          <td>2.2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

TextArea

  <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Text Area </ title >   </ head >   < body >     < form action = "/server" >       < label for = "feedback" > provide Feedback: </ label >       < textarea id = "feedback" name = "feedback" ></ textarea >       < button > submit </ button >       < br />       <!-- USING ATTRIBUTES -->       < label for = "feedback" > Provide FeedBack </ label >       < textarea         id = "feedback"         name = "feedback"         rows = "10"       ...
Read more

unordered list with image link

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Fruits with Images </ title > </ head > < body >     < h2 > List of Images </ h2 >     < ul >         < li > Apple < a href = "https://tse4.mm.bing.net/th?id=OIP.gxVIhxEKV2L4dkBjwptXjwHaHa&pid=Api&P=0&h=180" > see apple </ a ></ li >         < li > Orange < a href = "https://tse2.mm.bing.net/th?id=OIP.dTDqeIw9k8I7S-RJLmphagHaH-&pid=Api&P=0&h=180 " > see orange </ a ></ li >         < li > Mango < a href = "https://tse4.mm.bing.net/th?id=OIP.G5E2h2jvfrgncuCUQhM0WQHaFj&pid=Api&P=0&h=180" > see mango </ a ></ li > </...
Read more

Select input form

Image
  <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Select </ title >   </ head >   < body >     < form action = "/server" >       < div >         < select name = "profession" id = "profession" >           < option value = "student" > student </ option >           < option value = "developer" > dev </ option >         </ select >         < button > submit </ button >       </ div >       <!-- USING SELECTED ATTRIBUTE -->       < select name = "fruit" id = "fruit" >        ...
Read more