HTML Responsive Tables design with CSS trick and ultimate guide-line


HTML-responsive-tables-design
HTML-responsive-tables-design



Welcome to Article 3 of Web Design Articles In the previous part 2 we talked about the idea and use of HTML tags, today we will talk about how the An HTML Responsive Tables is created and how tags are used. 

<table> </table> A table is created inside these tags. This table tag is used within the Body section of HTML. The <tr> </tr> tags are used inside the table tags, and the <th> </th> tags inside the <tr> </tr> tags.

Let us say before you <th> </th> is the table of headers. In each section there are row or rows and columns, data is inserted inside these tags above the table head.

You can create as many columns as you want for your table <th> </th> This tag contains the name of your table header, namely the name you want to store all the data inside of this tag. Either.

Suppose you create a Result Sheet HTML Responsive Tables for your school students using HTML with these tags.

But how!


You are wondering how you can get a little thinking right now? But I will give you the code to practice, if you practice it by looking at this code you will easily learn.

I'm breaking down the table-making code here, so you can understand it well. If you do not understand, please let me know in the mail.


Step 1

First, use the <table> </table> code and show below how to get started.

<table style="width:100%"> This is Your Table Code </table>


Step 2

Then you have to take the <tr> </tr> code inside the <table> </table> code and <tr> </tr> the code inside the <th> </th>, how to do this. I'm going to show it precisely.

<table style="width:100%">
  <tr>
    <th>student name</th>
    <th>class</th>
    <th>Age</th>
    <th>roll</th>
    <th>point</th>
  </tr>
</table>


Step 3

Then you have to take the <tr> </tr> code inside the <table> </table> code and <td> </td> the code inside the <tr> </tr> code, and the code's Pass the data inside. I will show you how to do this work.

<table style="width:100%">
  <tr>
    <th>student name</th>
    <th>class</th>
    <th>Age</th>
    <th>roll</th>
    <th>point</th>
  </tr>
   <tr>
    <th>Rakib</th>
    <th>8</th>
    <th>13</th>
    <th>01</th>
    <th>5.00 GPA</th>
  </tr>
</table>


Step 4

Then the rest of the data in this way is to take the <tr></tr> code inside all the <table> </table> code and <td> </td> the code inside the <tr> </tr> code. Inside those data should be inserted. One thing I forgot to say is that as many donors as possible, they should take the <tr> </tr> and <td></td> codes.

<table style="width:100%">
  <tr>
    <th>student name</th>
    <th>class</th>
    <th>Age</th>
    <th>roll</th>
    <th>point</th>
  </tr>
   <tr>
    <th>Rakib</th>
    <th>8</th>
    <th>13</th>
    <th>01</th>
    <th>5.00 GPA</th>
  </tr>
  <tr>
    <th>saddam</th>
    <th>8</th>
    <th>13</th>
    <th>02</th>
    <th>4.70 GPA</th>
  </tr>
  <tr>
    <th>robin</th>
    <th>8</th>
    <th>13</th>
    <th>03</th>
    <th>4.62 GPA</th>
  </tr>
</table>


Step 5



When everything is OK HTML Responsive Tables, save your code in the index.html file and run it on your favorite browser.


sublime-text-editor
sublime-text-editor


Main Step setup

The table information itself is equivalent to the past one. In any case, notice the new table labels we've utilized:


THEAD is the place you put the information for the main column of your table. You at that point include the TR and TD labels. Strangely, the TFOOT labels come after THEAD and before TBODY. In the event that you put the TFOOT labels after TBODY your table may not work in certain programs.

The TFOOT has no TR labels, only a TD. We've included a COLSPAN quality here, as CSS doesn't do segment or line traversing quite well, or by any stretch of the imagination.

The TBODY labels contain the majority of the TR and TD labels.

In the event that you view the TABLE tag at the top, you'll see that it no longer has any characteristics. It's simply this:

<table></table>

Already, we had this:

<table Border = "1" CellPadding = "10" CellSpacing = "2" align="center">


These were all organizing ascribes we added to the HTML Responsive Tables tag. Presently, we can do this with CSS.

I am giving you HTML code and pure CSS code you can use and learn this code easy way.



HTML code 

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Twitter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="First Name">James</td>
      <td data-column="Last Name">Matman</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@qqqqq</td>
    </tr>
    <tr>
      <td data-column="First Name">Andor</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Designer</td>
      <td data-column="Twitter">@qqqqqqq</td>
    </tr>
    <tr>
      <td data-column="First Name">Tamas</td>
      <td data-column="Last Name">Biro</td>
      <td data-column="Job Title">Game Tester</td>
      <td data-column="Twitter">@qqqqqqq</td>
    </tr>
    <tr>
      <td data-column="First Name">Zoli</td>
      <td data-column="Last Name">Mastah</td>
      <td data-column="Job Title">Developer</td>
      <td data-column="Twitter">@qqqqqq</td>
    </tr>
    <tr>
      <td data-column="First Name">Szabi</td>
      <td data-column="Last Name">Nagy</td>
      <td data-column="Job Title">Chief Sandwich Eater</td>
      <td data-column="Twitter">@qqqqqq</td>
    </tr>
  </tbody>
</table>


Copy this code and use it under index.html file.  


CSS code with responsive query

* {
  margin: 0px;
  padding: 0px;
  font-family: arial;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e1e1e1;
}
table {
  width: 750px;
  border-collapse: collapse;
  margin:50px auto;
  box-shadow: 0px 0px 19px -5px #000;
  }

tr:nth-of-type(odd) {
  background: #eee;
  }

th {
  background: #58045e;
  color: white;
  font-weight: bold;
  }

td, th {
  padding: 10px;
  border: 1px solid #0000001c;
  text-align: left;
  font-size: 18px;
  }


@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  table {
      width: 100%;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-column);
    color: #000;
    font-weight: bold;
  }

}

get enjoy your first HTML Responsive Tables and learn more everything. 



Conclusion 


If you have any interest in web design or other related topics, please let us know in the comments or contact us directly. If you like our posts, please comment. We look at your posts with special interest. If you have helped us, please let us know in the comments. We hope you will leave a comment. We are writing the post for you.

Post a Comment

0 Comments