What means in html can you make a table like in the picture? enter image description here

Here, the distance is not just between the lines, but between the line boundaries. Each line as a separate element with its own separate border, between which the main background is visible.

  • 3
    First, who told you that this is a table? secondly, if this is done by the table, what prevents to see the code? - Alex
  • Why would you use tables? This is the last century. Better rubber layout (div-omi). Make a div on it, add css indents (margin) between nested objects, etc. - Misha
  • 2
    No one said. This is a graphic sketch. I see a structured data set located in a separate group, for me this is a table. - Pasha
  • Thanks for the advice. - Pasha
  • I read about the layout of the div'ami. In my case, this does not facilitate the task, but vice versa. I have table data with which to work later - sort / insert / delete. The table is still easier. - Pasha

2 answers 2

Удалось повторить в виде таблицы то, что изображено на картинке в вопросе. 

 body { background-color: #f1f1f1; } #rootTable { margin-left: auto; margin-right: auto; height: 100px; width: 550px; border-spacing: 2px 5px; } #rootTable > tbody > tr > td { border: 1px solid darkgray; background-color: white; } #rootTable > tbody > tr > td:first-child { text-align: center; width: 10%; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #rootTable > tbody > tr > td:last-child { width: 90%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } #rootTable > tbody > tr:hover > td { background-color: lightgreen; } .innerTable { border-collapse: collapse; height: 100%; width: 100%; } .innerTable > tbody > tr > td { border: none; padding: 4px; } .innerTable > tbody > tr > td:first-child { width: 65%; } .innerTable > tbody > tr > td:nth-child(2) { width: 20%; } .innerTable > tbody > tr > td:last-child { width: 15%; } .person-name { font-weight: bold; } .person-info { font-style: italic; } .dates { text-align: right; } .price, .paid { text-align: center; } 
 <body> <br/> <br/> <table id="rootTable"> <tbody> <tr> <td>36</td> <td> <table class="innerTable"> <tbody> <tr> <td class="person-name">Petya +1111111111</td> <td class="dates">from 11.06</td> <td class="price">$100.10</td> </tr> <tr> <td class="person-info">A good person</td> <td class="dates">to 15.07</td> <td class="paid">$110.00</td> </tr> </tbody> </table> </td> </tr> <tr> <td>49</td> <td> <table class="innerTable"> <tbody> <tr> <td class="person-name">Tanya +222222222</td> <td class="dates">from 16.06</td> <td class="price">$20.00</td> </tr> <tr> <td class="person-info">A very good person</td> <td class="dates">to 20.07</td> <td class="paid">$40.00</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body>

    Change the answer.

    to create such tables, you can do it manually or use PHP with the SWITCH function (or CASE. I don’t remember exactly)

    HTML + PHP usage example:

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { width: 100%; background-color: #FFFFFF; } .parent { padding: 4px; width: 60%; height: 60px; margin: 10px 20% 0 20%; background-color: #c3ffff; border-radius: 10px; } .parent > div{ display: inline-block; } .child_1{ margin-top: 10px; text-align: center; float: left; width: 10%; } .child_2{ width: 80%; } </style> </head> <body> <?php $number_of_tables = 10; //измени число на любое другое от 0 до infinite for ($x = 0; $x < $number_of_tables; $x++) { echo "<div class='parent'> <div class='child_1'> $x<br>October </div> <div class= ='child_2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>"; } ?> <div class="parent"> <div class="child_1">13 <br>October </div> <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </body> </html>

    If you do not want to embed PHP - use pure HTML:

     .parent { padding: 4px; width: 60%; height: 60px; margin: 10px 20% 0 20%; background-color: #c3ffff; border-radius: 10px; } #parent>div { display: inline-block; } .child_1 { margin-top: 10px; text-align: center; float: left; width: 10%; } .child_2 { width: 80%; } 
     <div class="parent"> <div class="child_1">13 <br>October </div> <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> <div class="parent"> <div class="child_1">12 <br>October </div> <div class="child_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div>

    Note: the code is not perfect. just an example of what can be done in your case

    • In your opinion, " What are you looking for - is this " at least somehow similar to the picture in question? - Alex
    • @ Pashka use border-radius - Antonio112009
    • here is php? the question " how to make the distance between the borders of lines ", and not " how to display several blocks using php ". This is a css and html question and only. Essentially you duplicated the code. - Alex
    • @Alex The author asked: "What means in HTML can you make a table like in the picture?" . I decided to show not only the solution of the issue itself, but also the options for creating the table. I am sure he and many others would be interested. - Antonio112009
    • You are not right. The answer should contain a solution to the question, and not "an extraneous code that may be useful to someone ." One of the slogans of SO "Question - Answer. Nothing superfluous" Further in the question there is no php tag, and you answer in php. It should be understood that this is not a forum for garbage. Please go through the introductory tour , and also read the help how to write a good answer . PS: there is also no point in duplicating the code. - Alex