Can a table look like this be made?
+---------------+
| | | | |
+---------------+
| | | |
+---------------+
| | | | |
+---------------+
If I do
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><td>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</td></tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
then abc is inserted in just one <td>.
This jdfiddle shows the problem
http://jsfiddle.net/littlesandra88/EskrV/
How is such a table made, if it is possible?
Add a colspan to the <td> with the 3 column table.
Updated fiddle: http://jsfiddle.net/EskrV/18/
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><td colspan="4">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</td></tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
You could do
<table>
<tr>
<td colspan=3>1</td>
<td colspan=3>2</td>
<td colspan=3>3</td>
<td colspan=3>4</td>
</tr>
<tr>
<td colspan=4>a</td>
<td colspan=4>b</td>
<td colspan=4>c</td>
<tr>
<td colspan=3>1</td>
<td colspan=3>2</td>
<td colspan=3>3</td>
<td colspan=3>4</td>
</tr>
</table>
Of course you can: http://jsfiddle.net/XqKRR/ (without nested tables)
However I've got that strage feeling that you're trying to use tables for something that is not a tabular data, am I right? If so, maybe a CSS and display: table[-row|-cell] will be a better soultion?
You could use nested <div>s then use css to set the width of each div.
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 !!!
I need to align td cell value to center, both horizontally and vertically. <td> has a rowspan attribute.
The output right now is like:
A | B | C | D
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Desired:
A | B | C | D
1 | 2 | 3 |
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Try :
<td style="vertical-align : middle;text-align:center;">
use <td rowspan="4" align="center">4</td> its work
table td {
padding: 5px;
}
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="4" align="center">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
live fiddle
Code
<table class="table table-bordered">
<thead>
<tr>
<td rowspan="2" style="vertical-align: middle;">
first
</td>
<td rowspan="2" style="vertical-align: middle;">
Second
</td>
<td rowspan="2" style="vertical-align: middle;">
Third
</td>
<td rowspan="1" colspan="2">
Fourth
</td>
</tr>
<tr>
<td>
fifth
</td>
<td>
sixth
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
You easily do it with css using CSS selectors and the vertical-align property.
Any td or th by default has a rowspan = 1.
To position the rowspan'd td text in the center, just do this:
Taking an example of rowspan = "3"
td[rowspan = "3"] {
vertical-align: middle;
}
If you want to make it generic, just use it as below:
th[rowspan]:not([rowspan="1"]) {
vertical-align : middle;
}
Try this:
<td rowspan="4" tyle="text-align:center;">4</td>
Just add rowspan 4.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td rowspan="4">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<style>
#customers td, #customers th {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td rowspan ="4">Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
</tr>
</table>
</body>
</html>
The text is centered aligned by default. Please check existing css as it is overwrite the align property.
try:
<td align="center" valign="middle">
Add general class into your css.
.mytable td[rowspan] {
vertical-align: middle;
text-align: center;
}
Use the align attribute
<td align="center">Name</td>
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 !
I want to create a table like
col1 | col2 | col3
** ** **
col4
****************
How should I write the html table tag?
Thank you so much
Best Way - add a column Span to the merged.
<table>
<tr>
<th>*</th>
<th>*</th>
<th>*</th>
</tr>
<tr>
<td colspan="3">***</td>
</tr>
</table>
JSFIDDLE: http://jsfiddle.net/Lde2fwe7/
Do it like this :
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3">*********</td>
</tr>
</table>
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3"> your text*</td>
</tr>
</table>
JSFiddle
use colspan can achieve it.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">head</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
I want to achieve this table structure
a | b | c
1 | 1 | 1
2 | 2 | 2
3 | 3 | 3
| | 4
I have this code but it puts the 4 in another column instead of underneath the 3
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
You will have to make some empty cells, the row with the '4' in it, is a new row:
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
</table>
This is normal : in your table header, you defined three different headers, thus three different columns. Since <td></td> defines a column in a table, your '4' gets its own column which is not defined by the column headers of the table.
In order to let the 4 go underneath the 3, you should make a new table row with the last containing 4, like this :
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>
As analternative to the toher answers that add a new row, if you want the 4 to be in the same table cell as the 3, just add a line break inside the table cell
...
<tr>
<td>1</td>
<td>2</td>
<td>3<br/>4</td>
</tr>
</table>
or use div tags in the cell like this
...
<tr>
<td>1</td>
<td>2</td>
<td>
<div>3</div>
<div>4</div>
</td>
</tr>
</table>