Why doesn't the top "1 2 3" line up with the bottom "1 2 3"?
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td rowspan="3">⟶</td>
<td>b</td>
<td rowspan="3">⟶</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
All rows need to have the same number of cells, or if rowspans are used, those have to sum up with the number of regular (not-rowspanning) cells.
Your first row has 3 cells, the second one 6. That can't work. If you insert those row-spanning cells in the first row (like in my adaption of your snippet below), it will work.
td { border: 1px solid #ddd; }
<table>
<tr>
<td>1</td>
<td rowspan="3">⟶</td>
<td>2</td>
<td rowspan="3">⟶</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Related
So I need to split my column table like this
in the middle we got a split by rows it I can do by colspan: 1; but how can I split it by column at the same time
This is how you do it
table td,
table th{
border: 1px solid #ccc;
padding:10px
}
<table>
<thead>
<tr>
<th rowspan="2">Head</th>
<th colspan="2">Split Head </th>
<th rowspan="2">Head</th>
</tr>
<tr>
<th>asd</th>
<th>asd</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</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 !
I have 3 tables which are given below;
User table:
<table border="1">
<tr>
<td>uid</td>
<td>name</td>
<td>status</td>
<td>category</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>1</td>
<td>C</td>
</tr>
</table>
Profile Table:
<table border="1">
<tr>
<td>pid</td>
<td>uid</td>
<td>slug</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>john-doe</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>jane-doe</td>
</tr>
</table>
And Rating Table:
<table border="1">
<tr>
<td>rid</td>
<td>uid</td>
<td>rating</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3.5</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>2.5</td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>3.5</td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td>2.5</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>3.5</td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td>2.5</td>
</tr>
</table>
I m trying to join the table and get value having common id with avg rating from rating fromr rating table.
the output I want is given below;
<table border="1">
<tr>
<td>uid</td>
<td>name</td>
<td>slug</td>
<td>status</td>
<td>category</td>
<td>rating</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john-doe</td>
<td>1</td>
<td>C</td>
<td>3.25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>jane-doe</td>
<td>1</td>
<td>C</td>
<td>3</td>
</tr>
</table>
Please try below query, I think this will work for you.
select u.*, p.slug, (select avg(rating) from Rating r where r.uid=u.uid) as rating from User u JOIN Profile p ON p.uid=u.uid
Let's say that is my html code:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want to paint only the inner table (A,B,C,D,E,F) to red (background-color:red)
Important to note - there is no "class" or "id" on purpose!!! I want a solution without it...
table table td {
background-color: red;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
this selector basically means: table inside table
table table{
background-color: red;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You could use table table { ... }. That should apply only to tables nested within another table tag. Or explicitely table > tbody > tr > td > table { ... }.
Hope this helps,
Chris.
Use selector like:
table table {
background-color: red;
}
Translation: table inside table.
Initially I misunderstood how to use the nth-child() psudeo-class. I understand it now. the below code will do what you ask.
To get the inner table you need to access the inner table rows. There are in fact other ways to do this using the nth formula however this is the simplest I can think of.
3 translates to the 3rd table row inside the initial table tag.
table tr:nth-child(3){
background: red;
}
https://jsfiddle.net/USERALPHA32/ufjqgewa/1/
And this will also do what you ask. The difference between this fiddle and the one above is that this one will access the nested table directly https://jsfiddle.net/USERALPHA32/ufjqgewa/3/
table tr table:nth-child(1){
background: red;
}
__________________________ABOVE IS CORRECT__________________________________
__________________________BELOW IS WRONG____________________________________
to get to a table inside a table you would do:
table:nth-child(2) {
background: red;
}
I believe you could use the nth-child selector. Though this may cause issue with cross browser support.
https://www.sitepoint.com/web-foundations/nth-childn-css-selector/
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>