How to make a square box around times in css/php? - php

Question

I am working on a website in which I want to make a square box around times.
The php code which I have used in order to pull off the times is:
{
echo date('l', strtotime($key)).": ".$value['start']." ".$value['end']."<br/> <br/>";
}
The above php pulls off the following day and times:
Problem Statement:
I am wondering what changes I should make in the php code above so that I can put the square boxes around times, something like this:

Answer 1

PHP has nothing to do with design. And you should definitely not use characters
(like ) to create spaces / margins
Demo: https://www.tehplayground.com/WtTs8Yk0pRw8wHAu
use CSS instead:
* {margin:0; box-sizing:border-box;}
html,body {height:100%; font:14px/1.4 sans-serif;}
.times {
display: inline-flex; /* act as inline */
flex-flow: row wrap; /* wrap into flex rows */
}
.times>* {
flex: 1 0 25%; /* 25%, so subdivision by 4 elements */
text-align: center;
padding: 5px;
margin: 5px 0;
}
.times>*:nth-child(2n) { /* every second child element (time SPAN) */
border: 1px solid #ddd;
border-radius: 3px;
}
<div class="times">
<span>mon:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>tue:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>wed:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
</div>
so inside your PHP foreach simply echo like:
echo '
<span>'. date('l', strtotime($key)) .':</span>
<span>'. $value['start'] .'</span>
<span>to</span>
<span>'. $value['end'] .'</span>
';

Answer 2

I have added the round-cornered box around the time values. Round cornered boxes were created using CSS class called box. Put this code in the header section of your page
<style>
.box{
background-color: #4CAF50;
border-radius: 12px;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
and change the php code as below
echo date('l', strtotime($key)).": <span class='box' >".$value['start']."</span> <span class='box' >".$value['end']."</span><br/> <br/>";