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>
Related
I am to create function where when input 100 in row3, row4 and row5 the rows below it will also get 100 inserted into them. I am using nextAll() to try to do this but I think it doesn't work because the rows are not together in an order. Is there some thing I am not doing right?
$("input[id^=row]").on("change", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row0'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>
$("input[id^=row]").on("input", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
try on("input") instead of on('change'),
I have multiple reminder in the table I'm saving that reminder with date range so the reminder will display within that date like this
<table>
<tr>
<th>id</th>
<th>reminder</th>
<th>start_date</th>
<th>end_date</th>
</tr>
<tr>
<td>1</td>
<td>Call to Alex</td>
<td>2017-09-16</td>
<td>2017-09-23</td>
</tr>
<tr>
<td>2</td>
<td>Call to Crame</td>
<td>2017-09-19</td>
<td>2017-09-20</td>
</tr>
</table>
I want to get the data by day for example like below I'm getting the value by current date I don't know how to query by datte in two different columns. Kindly help me to find the solution.
<table>
<tr>
<th>date</th>
<th>reminder count</th>
</tr>
<tr>
<td>2017-09-16</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-17</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-18</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-19</td>
<td>2</td>
</tr>
<tr>
<td>2017-09-20</td>
<td>2</td>
</tr>
<tr>
<td>2017-09-21</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-22</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-23</td>
<td>1</td>
</tr>
<tr>
<td>2017-09-24</td>
<td>0</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 !
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
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.