I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.
Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!
Related
I have a nested table but for some reason, the CSS selector seems broken after the nested table.
.yellow {
background-color: yellow;
}
<table>
<tr class="yellow">
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<table>
<tr>
<td>4</td>
</tr>
</table>
<td/>
</tr>
<tr>
<table>
<tr class="yellow">
<td>
5
</td>
</tr>
</table>
</tr>
<tr class="yellow">
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
https://jsbin.com/zuxagenoba/edit?html,css,output
the issue is that your nested table (the one which contains 5) is a direct child of tr element and you have a missing td element. Wrapping that table with and fixes the issue.
See code snippet below
.yellow {
background-color: yellow;
}
<table>
<tr class="yellow">
<td>1</td>
<td>2</td>
<td>3</td>
<td>
<table>
<tr>
<td>4</td>
</tr>
</table>
<td/>
</tr>
<tr>
<td>
<table>
<tr class="yellow">
<td>
5
</td>
</tr>
</table>
</td>
</tr>
<tr class="yellow">
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
I had a problem while creating a small table with specific details like in the pic enter image description here
I did this code but it doesn't give the wanted results
<html>
<head>
<style>
table,td,th{border: 2px solid gray; text-align:center}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Use </td> instead of <td> for the closing tags of boxes 6 and 7. The colspan for box 2 is not necessary. The other three colspans were too large. This code should get you to Figure 2.
<table width="30%">
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="3">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
This would make the first figure:
<table width="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="4">5</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/
My HTML table is like this one:
<table>
<tr>
<td>123 - 20 - 20</td>
</tr>
</table>
The values are retrieved from a db and so are shown as this image: https://imgur.com/g7tG2yr
How can I have all values (all the numbers) well aligned?
Thanks
Your best bet is to format each "substring" (each number and operator) as it's own table cell, and apply text-align: center to every cell. This will keep everything aligned in the center, regardless of how many digits the number has.
td {
text-align: center;
}
<table>
<tr>
<td>27.082</td>
<td> - </td>
<td>5</td>
<td> - </td>
<td>5</td>
</tr>
<tr>
<td>3.905</td>
<td> - </td>
<td>2</td>
<td> - </td>
<td>2</td>
</tr>
<tr>
<td>13.602</td>
<td> - </td>
<td>2</td>
<td> - </td>
<td>3</td>
</tr>
<tr>
<td>0</td>
<td> - </td>
<td>0</td>
<td> - </td>
<td>1</td>
</tr>
<tr>
<td>43715</td>
<td> - </td>
<td>513</td>
<td> - </td>
<td>312</td>
</tr>
</table>
With a lot of digits, you can see that everything still stays aligned:
td {
text-align: center;
}
<table>
<tr>
<td>27.082</td>
<td> - </td>
<td>5</td>
<td> - </td>
<td>5</td>
</tr>
<tr>
<td>3.905</td>
<td> - </td>
<td>2</td>
<td> - </td>
<td>2</td>
</tr>
<tr>
<td>13.602</td>
<td> - </td>
<td>2</td>
<td> - </td>
<td>3</td>
</tr>
<tr>
<td>0</td>
<td> - </td>
<td>0</td>
<td> - </td>
<td>1</td>
</tr>
<tr>
<td>43750311251242145</td>
<td> - </td>
<td>5313451413</td>
<td> - </td>
<td>31434132</td>
</tr>
</table>
enter code hereFairly new to this and doing my first HTML project. In it I have to create a table, which I have managed to do fine. However, it isn't exactly the same. Here's what I have:
<table>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
It is supposed to look like this
How do I get the track listing numbers to sit so tightly in that cell? I've tried colspan and rowspan and can't get it to sit that comfortably.
Also, I have not inlcluded the table headers in my HTML above but I do have it. There are 2 table headers, yet 3 columns underneath the header. How do I get it all to sit together nicely as in the picture I linked, and not like mine?
Thanks!
Ok I see. You need the HTML as it is bellow:
<table border="1">
<tr>
<td colspan="2">Bruce Springsteen<br>Born To Run</td>
<td><img src="https://upload.wikimedia.org/wikipedia/en/7/7a/Born_to_Run_(Front_Cover).jpg"></td>
</tr>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
You can also test it on this JSFiddle.
The key was to add colspan="2" on the <td> that writes "Bruce Springsteen...", which means that this cell will take the place of 2 columns.
Hope this helped you. If it helped you you can accept and upvote my answer. Thanks !
My Code is......
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Row two doesn't show. How can I do it?
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td >  </td>
<td > </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Have you tried adding <td> </td> ?