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>
Related
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 !!!
How can i separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>
To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.
I'm currently making a HTML table (it's a work in progress and still needs a lot more CSS to make it look pretty) and I can't seem to style the <THEAD> so it stretches across the entire table instead of only the left - as shown in the attached photo. I've tried multiple ways but none seem to work, I would be very grateful if anyone could help.
<head>
<title>League of Legends EU LCS Standings</title>
</head>
<body>
<TABLE WIDTH="50%" BORDER="5" CELLPADDING="4" CELLSPACING="3">
<THEAD>
<TR>
<TH COLSPAN="2">
<BR>
<H3>LoL EU LCS Table Standings</H3> </TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH>Position</TH>
<TH>Team</TH>
<TH>Wins</TH>
<TH>Draws</TH>
<TH>Losses</TH>
<TH>Points</TH>
</TR>
<TR ALIGN="CENTER">
<TD>1</TD>
<TD><A HREF=“http://www.fnatic.com”>Fnatic</A></TD>
<TD>5</TD>
<TD>2</TD>
<TD>1</TD>
<TD>17</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>2</TD>
<TD><A HREF=“http://www.g2esports.com”>G2 ESports</A></TD>
<TD>4</TD>
<TD>4</TD>
<TD>0</TD>
<TD>16</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>3</TD>
<TD><A HREF=“http://www.h2k-gaming.eu”>H2K</A></TD>
<TD>3</TD>
<TD>4</TD>
<TD>1</TD>
<TD>13</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>4</TD>
<TD><A HREF=“http://www.schalke04.de/en/”>FC Schalke 04</A></TD>
<TD>3</TD>
<TD>3</TD>
<TD>2</TD>
<TD>12</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>5</TD>
<TD><A HREF=“https://www.splyce.gg”>Splyce</A></TD>
<TD>2</TD>
<TD>4</TD>
<TD>2</TD>
<TD>10</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>6</TD>
<TD><A HREF=“http://www.team-vitality.fr”>Team Vitality</A></TD>
<TD>1</TD>
<TD>5</TD>
<TD>2</TD>
<TD>8</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>7</TD>
<TD><A HREF=”http://www.giantsgaming.pro/en/home”>Giants</A></TD>
<TD>2</TD>
<TD>1</TD>
<TD>5</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>7</TD>
<TD><A HREF=“http://www.unicornsoflove.eu”>Unicorns of Love</A></TD>
<TD>2</TD>
<TD>1</TD>
<TD>5</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>9</TD>
<TD><A HREF=“http://www.roccat.org/en-GB/Home/Overview/”>Roccat</A></TD>
<TD>1</TD>
<TD>4</TD>
<TD>3</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>9</TD>
<TD><A HREF=“https://www.origen.gg”>Origen</A></TD>
<TD>1</TD>
<TD>4</TD>
<TD>3</TD>
<TD>7</TD>
</TR>
</TBODY>
</TABLE>
<style>
td, th {
border: 1px solid #999;
padding: 0.3em;
}
th {
background-color:#808080;
color: white;
}
th, tr {
font-size: 24px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
tr:hover {background-color: #f5f5f5}
table{
border: 1px solid black;
width: 100%;
}
</style>
</body>
</html>
Change:
<TH COLSPAN="2">
to :
<TH COLSPAN="6">
You told the table head row to only span two columns when you want it to span all six.
Note: as danfromgermany noted, be sure to fix your quotes to use ", not “. Also note that <th> elements can't contain <h3> elements. You should run your code through a HTML validator to catch such errors.
This isn't something you can fix with styling.
To make a table heading cell span multiple columns, you have to set the colspan attribute to be equal to the total number of columns. You have more than 2 columns, so 2 won't do the job.
You don't have table heading cell data though. The th element is for putting a heading on a column (or set of columns), not a whole table.
That is what caption is for.
td,
th,
caption {
border: 1px solid black;
padding: .3em font-weight: bold;
font-size: 125%;
}
caption {
background-color: gray;
color: #fff
}
th,
tr {
font-size: 24px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif
}
tr:hover {
background-color: #f5f5f5
}
table {
border: 1px solid #000;
width: 100%
}
<table width="50%" border="5" cellpadding="4" cellspacing="3">
<caption>LoL EU LCS Table Standings</caption>
<tbody>
<tr>
<th>
Position
</th>
<th>
Team
</th>
<th>
Wins
</th>
<th>
Draws
</th>
<th>
Losses
</th>
<th>
Points
</th>
</tr>
<tr align="center">
<td>
1
</td>
<td>
Fnatic
</td>
<td>
5
</td>
<td>
2
</td>
<td>
1
</td>
<td>
17
</td>
</tr>
<tr align="center">
<td>
2
</td>
<td>
G2 ESports
</td>
<td>
4
</td>
<td>
4
</td>
<td>
0
</td>
<td>
16
</td>
</tr>
<tr align="center">
<td>
3
</td>
<td>
H2K
</td>
<td>
3
</td>
<td>
4
</td>
<td>
1
</td>
<td>
13
</td>
</tr>
<tr align="center">
<td>
4
</td>
<td>
FC Schalke 04
</td>
<td>
3
</td>
<td>
3
</td>
<td>
2
</td>
<td>
12
</td>
</tr>
<tr align="center">
<td>
5
</td>
<td>
Splyce
</td>
<td>
2
</td>
<td>
4
</td>
<td>
2
</td>
<td>
10
</td>
</tr>
<tr align="center">
<td>
6
</td>
<td>
Team Vitality
</td>
<td>
1
</td>
<td>
5
</td>
<td>
2
</td>
<td>
8
</td>
</tr>
<tr align="center">
<td>
7
</td>
<td>
Giants
</td>
<td>
2
</td>
<td>
1
</td>
<td>
5
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
7
</td>
<td>
Unicorns of Love
</td>
<td>
2
</td>
<td>
1
</td>
<td>
5
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
9
</td>
<td>
Roccat
</td>
<td>
1
</td>
<td>
4
</td>
<td>
3
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
9
</td>
<td>
Origen
</td>
<td>
1
</td>
<td>
4
</td>
<td>
3
</td>
<td>
7
</td>
</tr>
</tbody>
</table>
</body>
</html>
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> ?
I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/
Here it is:
Code: http://jsfiddle.net/jsTvA/14/
You could create a new table in a cell.
The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.
The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>
To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.
You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com