I have a main table and then insert sub tables each td. Like below The problem is lets say I have:
<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>
now if sub1 has only 4 rows in it but sub 2 and 3 each have 100 rows the table keeps putting sub1 table in the middle of the rest of the table. How would i stop it from doing that?
Try this:
<td valign="top">
You have to specify, where to align the content of td
Look in to valign
<td valign='top'>
Updated source
<table id = "main>
<tr>
<th id = "header1">blah</td>
<th id = "header2">blah</td>
<th id = "header3">blah</td>
</tr>
<tr><td valign='top'>
<table id = "sub1">
<tr><td headers='header1'>1</td></tr>
</table>
</td>
<td>
<table id = "sub2">
<tr><td headers='header2'>2</td></tr>
</table>
</td>
<td>
<table id = "sub3">
<tr><td headers='header3'>3</td></tr>
</table>
</td>
</tr>
</table>
If you are increasing/decreasing the no. of rows/cols in your tables, you may need to adust the same through rowspan and colspan properties. Also displaying text at the top of any cell needs valign="top" property
Make the second table row (after the header row) opening tag <tr style="vertical-align:top">. That will work and there is no need for rowspan or colspan.
Related
I want to create a table that its data is a Map< String, List < Object> >.
So the table has one header that and the rows should have the exact data.
Map.key
Object.item1
Object.item2
Object.item3
So since it is a List of Object i want one row for every Object of the List and the Map.key to be repeated.
So i need to iterate through keys like
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr th:each= "result : ${myMap}">
<td th:text="${result.key}"></td>
<td><table>
<tr th:each="obj: ${result.value}">
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'"></td>
<td th:text="${obj.flag}==true?'YES':'NO'"></td>
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}"></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
but this solution places a table in a table. I want to use one header and iterate the lists and place the variables in the main table .
I think you're looking for a structure like this:
<table>
<thead>
<tr>
<th>Code</th>
<th>Status</th>
<th>Flag</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<th:block th:each= "result : ${myMap}">
<tr th:each="obj: ${result.value}">
<td th:text="${result.key}" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?'Error':'Warning'" />
<td th:text="${obj.flag}==true?'YES':'NO'" />
<td th:text="${not #lists.isEmpty(obj.errorList)}?${obj.warningList}:${obj.errorList}" />
</tr>
</th:block>
</tbody>
</table>
I want to create a table like:
T1----T2----T3
--------------
B1
A1 B2 C1
B3
I'm using the following code:
<table class="table">
<thead>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">A1</td>
<tr>
<td>B1</td>
<tr>
<td>B2</td>
</tr>
<td>C1</td>
</tr>
</tbody>
</table>
Demo: https://jsfiddle.net/90yegr6f/
I have problems with C1. How to solve this?
You need to focus on doing things one row at a time. Deal with everything in the first row. Then start a new row and deal with everything in that.
So the first row contains A1, B1 and C1.
<tr>
<td>A1
<td>B1
<td>C1
The second row contains only B2
<tr>
<td>B2
and so on.
Now, you want the first and last cells of the first row to span multiple rows:
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
Which gives you:
<table class=table>
<thead>
<tr>
<th>T1
<th>T2
<th>T3
<tbody>
<tr>
<td rowspan=3>A1
<td>B1
<td rowspan=3>C1
<tr>
<td>B2
<tr>
<td>B3
</table>
I have one table, in this table two columns and 5 rows are there. In First column have a check box and second column have a data. I want get the second column row value of checked items.
My table id was "tb1", checkbox id "cb1" and second field id "da1".
I want the result like "Data2 and Data5" That means whatever I check, that particular second column(<td>) value.
This is possible, please help me.
If you are using cb2 and da2 for row two, then in javascript you could do:
If data column is td element only:
document.getElementById("da2").innerText
If data column is input element:
document.getElementById("da2").value;
JS Bin
Bind the event on every checkbox and the find second field" with the help of closest
JavaScript
$(function(){
$("#tb1").on('click','input',function(){
var value =($(this).closest('tr').find('[id^=da]').text())
alert(value)
})
})
HTML
<table id="tb1" cellpadding="5" border="1" cellspacing='0' width="200">
<tr>
<td id="cb1"><input type='checkbox' /> </td>
<td id="da1">Data 1</td>
</tr>
<tr>
<td id="cb2"><input type='checkbox' /> </td>
<td id="da2">Data 2</td>
</tr>
<tr>
<td id="cb3"><input type='checkbox' /> </td>
<td id="da3">Data 3</td>
</tr>
<tr>
<td id="cb4"><input type='checkbox' /> </td>
<td id="da4">Data 4</td>
</tr>
</table>
i need to change quite some html entries in a mysql database. my problem is that some tags need to be replaced while the surrounded code needs to stay the same. in detail: all td-tags in tr-tags with the class "kopf" need to be changed to th-tags (and the addording closing for the tags)
it would not be a problem without the closing tags..
update `tt_content` set `bodytext` = replace(`bodytext`,'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">');
this would work
from what i found the %-sign is used, but how exactly?:
update `tt_content` set `bodytext` = replace(`bodytext`,'<tr class="kopf"><td colspan="2">%</td></tr>','<tr><th colspan="2">%</th></tr>');
i guess this would replace all the code within the old td tags by a %-sign?? how can i achive the needed replacement?
edit: just to clarify things here is a possible entry in the db:
<table class="techDat" > <tbody> <tr class="kopf"> <td colspan="2"> <p><strong>Technical data:</strong></p> </td> </tr> <tr> <td> <p>Operating time depending on battery chargeBetriebszeit je Akkuladung</p> </td> <td> <p>Approx. 4 h</p> </td> </tr> <tr> <td> <p>Maximum volume</p> </td> <td> <p>Approx. 120 dB(A)</p> </td> </tr> <tr> <td> <p>Weight</p> </td> <td> <p>Approx. 59 g</p> </td> </tr> </tbody> </table>
after the mysql replacement it should look like
<table class="techDat" > <tbody> <tr> <th colspan="2"> <p><strong>Technical data:</strong></p> </th> </tr> <tr> <td> <p>Operating time depending on battery chargeBetriebszeit je Akkuladung</p> </td> <td> <p>Approx. 4 h</p> </td> </tr> <tr> <td> <p>Maximum volume</p> </td> <td> <p>Approx. 120 dB(A)</p> </td> </tr> <tr> <td> <p>Weight</p> </td> <td> <p>Approx. 59 g</p> </td> </tr> </tbody> </table>
Try two replaces
update `tt_content` set `bodytext` =
replace(replace(`bodytext`,
'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">'),
'</td></tr>','</th></tr>')
Try updating your records with two queries :
1) for without % sign:
updatett_contentsetbodytext= replace(bodytext,'<tr class="kopf"><td colspan="2">','<tr><th colspan="2">');
2) for % sign
updatett_contentsetbodytext= replace(bodytext,'<tr class="kopf"><td colspan="2">%</td></tr>','<tr><th colspan="2">%</th></tr>')
where instr(bodytext,'%') > 0 ;
Please, either look at http://jsfiddle.net/mawg/pL9kd/ or stick the code below into your favourite HTML editor ...
Look to the right of OMG! Item 4 contains a *nested* array. (How) can I get that nested array (xyz) to be 2 columns wide, even if its content doesn't need so much space?
<table border="1" cellpsacing="0" cellpadding="0" style="">
<tr><th style="border-width:1" colspan="3">This is an array</th></tr>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>item 1</td>
<td>string ( 3 chars)</td>
<td>abc</td>
</tr>
<tr>
<td>0</td>
<td>string ( 25 chars)</td>
<td>item 2 is indexed by zer0</td>
</tr>
<tr>
<td>this equals seven</td>
<td>integer</td>
<td>7</td>
</tr>
<tr>
<td>item 4 is a nested array</td>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>0</td>
<td>string ( 24 chars)</td>
<td>item 4, offest 0's value</td>
</tr>
<tr>
<td>OMG! Item 4 contains a *nested* array F5</td>
<td colspan="2">
<table border="1">
<tr><td colspan="3">Array</td></tr>
<tr>
<td>xyz</td>
<td>string ( 7 chars)</td>
<td>xyz val</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>item 4, offest 2 is True</td>
<td>boolean</td>
<td>True</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>final item</td>
<td colspan="2">NULL</td>
</tr>
</table>
</td>
</table>
Do you mean like this? http://jsfiddle.net/pL9kd/8/
(Width = 100%)
Check this you can use the width, to set to width='66%' which works since you know there are 3 columns and 2/3 is 66%. Also set the containing table to width='100%' since you are going to need all of the possible space.
From what I could find there is nothing like what your asking (or at least my interpretation of it). Could you not simply create a column width equaling two total columns?
So something like
<td width="40">xyz</td>
I could be way off but that's just my guess. Just curious, what is the implementation for this? I am sure you know css lists and other css elements are much more efficient at styling, correct?