CODEWITHSUNDEEP
htmlcss
Mubeen Momin
Mubeen Momin

Reputation: 3

how to set a table header and table data in html

I am not able to set the table as same as the header. please help and thanks in advance. code and image are below.enter image description here

    <!-- This is the table Style-->
    <style>
        table {
            width:100%;
        }
        th, td {
            width: 100%;
            border: 3px solid black;
            border-collapse: collapse;
        }
        th, td {
            width: 100%;
            padding: 13px;
            text-align: left;
        }
        table#t01 th {
            width: 100%;
            background-color: orange;
            color: black;
            font-size: 20px;
            position: relative;                
        }
    </style>

//this is the HTML code

<div>
  <table id="t01">
    <tr class="header"> 
      <th>Name</th>
      <th>Download</th>
    </tr>
    <tr class="data_table"></tr> 
  </table>
</div>

Upvotes: 0

Views: 83

Answers (3)

elpidaguy
elpidaguy

Reputation: 672

Your html is wrong, use :

   <table>
        <thead>
            <tr class='header'>
               <th>Name</th>
               <th>Download</th>
            </tr>
        <thead>
        <tbody>
            <tr class='data_table'>

            </tr>
        </tbody>
    </table>

Upvotes: 1

Mithu CN
Mithu CN

Reputation: 595

You can use the Bootstrap framework. You may get almost everything for web designing :

Visit getbootstrap

Example of a Bootstrap table.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

Try Following code.

table {
  width:100%;
}
th, td {
  width: 100%;
  border: 3px solid black;
  border-collapse: collapse;
}
th, td {
  width: 100%;
  padding: 13px;
  text-align: left;
}
table#t01 th {
  width: 100%;
  background-color: orange;
  color: black;
  font-size: 20px;
  position: relative;
}
  <table id="t01">
    <tr class="header"> 
      <th colspan="2">Name</th>
      <th>Download</th>
    </tr>
    <tr class="data-table"> 
      <td>Mp3</td>
      <td><a href="#">Download</a></td>
    </tr>
    <tr class="data-table"> 
      <td>File</td>
      <td><a href="#">Download</a></td>
    </tr>
  </table>

Upvotes: 0

Related Questions