HTML table <td> width discrepancy between two table - html

I have a requirement in which I have to show quarter months with quarter name on the starting month. For eg.
Q120 Q220
COL1 COL2 COL3 APR-19 MAY-19 JUN-19 JUL-19 AUG-19 SEP19
For that I created two tables, one table to print quarters and other to print other columns and their data.
<table>
<tr>
<td width="70px"></td>
<td width="70px"></td>
<td width="70px"></td>
<td width="210px">Q120</td>
<td width="210px">Q220</td>
</tr>
</table>
<table>
<tr>
<td width="70px">COL1</td>
<td width="70px">COL2</td>
<td width="70px">COL3</td>
<td width="70px">APR-19</td>
<td width="70px">MAY-19</td>
<td width="70px">JUN-19</td>
<td width="70px">JUL-19</td>
<td width="70px">AUG-19</td>
<td width="70px">SEP-19</td>
</tr>
</table>
Whats wrong with my code ? I am NOT getting proper alignment as explained in my example . My quarter row is shifting towards left side ideally Q120 should come above APR-19.

Related

HTML Table with rowspan and colspan not aligning as expected

I have been racking my brain with this for a while and not a single of the fixes I have come across on SO have helped me, so I am reaching out for some help now.
I have a table that is built up of a collection of row pairs that should be combined in a specific way. Below is the html structure I have been using.
<table border=1>
<tr>
<td rowspawn="2">a</td>
<td rowspawn="2">b</td>
<td rowspawn="2">c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td rowspawn="2">g</td>
<td rowspawn="2">h</td>
</tr>
<tr>
<td colspan="3">def</td>
</tr>
</table>
My understanding is that the cells "d" "e" "f" should have the cell "def" directly under them, however I have the following JSFiddle.
I believe I should see something like this
-------------
| d | e | f |
-------------
| def |
-------------
This doesn't make any sense to me, so any help would be greatly appreciated.
Thanks.
You simply have a mistake in "rowspawn" (it's "rowspan")
<table border=1>
<tr>
<td rowspan="2">a</td>
<td rowspan="2">b</td>
<td rowspan="2">c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
</tr>
<tr>
<td colspan="3">def</td>
</tr>
</table>

HTML tables - How to use rowspan properly?

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>

string replace in phpmyadmin while keeping inner text

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 ;

Dynamic table with data attributes

I have a dynamically created table with the row and column numbers stored as data attributes in each cell:
%table
- (1..3).each do |row|
%tr
- (1..3).each do |column|
%td.cell{:data => {:x => column, :y => row}}
The HTML this generates is fine, except that whenever the column equals the row, data-y is missing:
<table>
<tr>
<td data-x='1'></td>
<td data-x='2' data-y='1'></td>
<td data-x='3' data-y='1'></td>
</tr>
<tr>
<td data-x='1' data-y='2'></td>
<td data-x='2'></td>
<td data-x='3' data-y='2'></td>
</tr>
<tr>
<td data-x='1' data-y='3'></td>
<td data-x='2' data-y='3'></td>
<td data-x='3'></td>
</tr>
</table>
Anyone know what's causing this?
This is a bug in Haml version 4.0.0. It’s fixed in 4.0.1.rc.1 – the fix hasn’t made it into a full release as of writing this but you should be okay with the rc1 gem.

Table cell too wide

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?