padding between table components not working - html

I have a table.
<table style="margin-left: 20px" class="tg">
<tbody>
<tr>
<td class="tg- 0lax">Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
I want the margin between the question 1 and the answer 1 2px. And the margin between the answer 1 and question 2 , 10 px. I cant get i done. I did try the following things: style="margin-bottom / margin-top in the and , al well as padding 2px. But both doesnt work


<td></td> and <tr></tr> cant be given a margin. Although you can give them a padding when you set display: block; Then you can go on an set things like every second one should get a bigger padding at the bottom (as you wanted it). Here is a snippet with very basic styles:
tr {
display: block;
}
tr:nth-child(even) {
padding-bottom: 20px;
}
tr:nth-child(odd) {
padding-bottom: 2px;
}
<table>
<tbody>
<tr>
<td>Question 1</td>
</tr>
<tr>
<td>Answer 1</td>
</tr>
<tr>
<td>Question 2</td>
</tr>
<tr>
<td>Answer 2</td>
</tr>
</tbody>
</table>


Set border-spacing property 2px to the table, and then skip 5 rows to get 10px something like this:
<table style="margin-left: 20px;border-spacing: 2px;" class="tg">
<tbody>
<tr>
<td class="tg- 0lax" >Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>

Related

How to put table in a table?

I need to make a table with more tables, but i dont know how to put this tables inside
It should look like this
i need to do this without CSS
I have tried something...well it turns out like this
I don't understand how to make it

This is a HTML lesson for tables as well as colspan and rowspan attributes:
<body>
<table>
<td>spaltenweise</td>
<td>
<table>
<td colspan="4">A04_03a</td>
<tr>
<td>Spale 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="4">Spalte 1+2+3+4</td>
</tr>
</table>
</td>
<td>
<table>
<td colspan="4">A04_03b</td>
<tr>
<td>Spale 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="2">Spalte 1+2</td>
<td colspan="2">Spalte 3+4</td>
</tr>
</table>
</td>
<td>
<table>
<td colspan="4">A04_03c</td>
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
<td>Spalte 3</td>
<td>Spalte 4</td>
</tr>
<tr>
<td colspan="1">Spalte 1</td>
<td colspan="3">Spalte 2+3+4</td>
</tr>
</table>
</td>
<tr>
<td>zeilenweise</td>
<td>
<table>
<tr colspan="3">A04_03d</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="4">Zeile 1+2+3+4</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
<tr>
<td>Zeile 3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
<td>
<table>
<tr colspan="3">A04_03e</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="2">Zeile 2+3</td>
</tr>
<tr>
<td>Zeile 2</td>
</tr>
<tr colspan="3"></tr>
<tr>
<td>Zeile 3</td>
<td rowspan="2">Zeile 2+3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
<td>
<table>
<tr colspan="3">A04_03f</tr>
<tr>
<td>Zeile 1</td>
<td>1</td>
</tr>
<tr>
<td>Zeile 1</td>
<td rowspan="3">Zeile 2+3+4</td>
</tr>
<tr>
<td>Zeile 3</td>
</tr>
<tr>
<td>Zeile 4</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

<table>
<tr>
<td style="border:1px solid black;">
Spaltenweise
</td>
<td style="border:1px solid black;">
<table>
<tr>
<td style="border:1px solid black;">
A04
</td>
</tr>
<tr>
<td style="border:1px solid black;">
100
</td>
<td style="border:1px solid black;">
200
</td>
<td style="border:1px solid black;">
300
</td>
</tr>
<tr >
<td colspan=3 style="border:1px solid black;">
spalte 1 2 3 4
</td>
</tr>
</table>
</td>
</tr>
</table>

Make two cells in same row of 2 tables have same width

I have 2 tables in same row of the big table, like this:
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Type A</td>
</tr>
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>10%</td>
</tr>
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>40%</td>
</tr>
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
But when the text in first column (e.g. "Type A") is too long, it makes a new line. Then data in same row is not in same row. ("Type B" is not in same row with "90%" and "60%")
Return data is in xml format, like this:
<DataGroup Storage="Storage 1">
<DataRow Type="Type A" Percentage="10%"/>
<DataRow Type="Type B" Percentage="90%"/>
</DataGroup>
<DataGroup Storage="Storage 2">
<DataRow Type="Type A" Percentage="40%"/>
<DataRow Type="Type B" Percentage="60%"/>
</DataGroup>
I have to draw borders to make it look like one table. Render in cshtml file.
How can I resolve this? Many thanks.

You can add the border: 1px solid black; to CSS to make it like a table. For HTML, you just need one table.
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A
<br>new line</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
</table>

You can stop word-wrap with white-space: nowrap; although it stops honoring the width element.
tr td:nth-child(1){
width:20px;
color:red;
white-space: nowrap;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
<table>

I'm assuming, you have a good reason for having tables within table. Then your problem is your semantics. You are not outputting the 'Type B', '90%' and '60%' on the same rows of the big table. Your sub-tables can either be aligned by vertical-align as blocks or you need to rework your big table semantics to something like this.
<table class="big">
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type A Lorem ipsum</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>10%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>40%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>

Highlight whole row regardless rowpsan - css

I have the code below:
tbody > tr:hover{
background-color: lightgrey;
cursor: pointer;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>
How can I highlight the whole row when I hover to the row.
For example, when I hover to January, it should highlight the whole January row instead of highlight only the half one because of the rowspan attribute.

Move the styling to the td under the hovered tr. In addition, highlight the sibling row, when the 1st row is hovered. The only caveat is that if the 2nd tr is hovered, it won't highlight the 1st cell.
tr:hover > td {
background-color: lightgrey;
cursor: pointer;
}
tr:nth-child(2n + 1):hover + tr {
background-color: lightgrey;
}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td>$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td>$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>

tr:hover td:not([rowspan]) {background: red;}
tr:hover td[rowspan]:hover ~ td {background: none;}
tr:hover td[rowspan]:hover {background: yellow;}
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">January</td>
<td>Week 1</td>
<td >$150</td>
</tr>
<tr>
<td>Week 3</td>
<td>$100</td>
</tr>
<tr>
<td rowspan="2">February</td>
<td>Week 2</td>
<td >$50</td>
</tr>
<tr>
<td>Week 1</td>
<td>$80</td>
</tr>
</tbody>
</table>

HTML Table not displaying properly

Hey guys I was creating this table table recently in HTML.
image:http://imgur.com/wPXCwrd
The table (shown in image) created perfectly but a weird blank row was created (marked red in image). When I tried to delete that code the entire cells below the QUESTIONS row gets shifted (image link:http://imgur.com/jBfmNGV).
How do I remove that blank cell after MEN cell?
CODE:
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>

Just remove the :
<td> </td>
so your final code will be :
<!DOCTYPE html>
<html>
<body>
<table align="left" border="1" cellpadding="3" cellspacing="3">
<tbody>
<tr>
<td colspan="5">QUESTIONAIRE RESULTS</td>
</tr>
<tr>
<td rowspan="3">QUESTIONS</td>
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
<tr>
</tr>
<tr>
<td>YES</td>
<td>NO</td>
<td>YES</td>
<td>NO</td>
</tr>
<tr>
<td>Question 1</td>
<td>42%</td>
<td>58%</td>
<td>61%</td>
<td>39%</td>
</tr>
<tr>
<td>Question 2</td>
<td>53%</td>
<td>47%</td>
<td>69%</td>
<td>31%</td>
</tr>
<tr>
<td>Question 3</td>
<td>26%</td>
<td>74%</td>
<td>51%</td>
<td>49%</td>
</tr>
<tr>
<td>Question 4</td>
<td>40%</td>
<td>60%</td>
<td>60%</td>
<td>40%</td>
</tr>
</tbody>
</table>
</body>
</html>
Preview: https://jsfiddle.net/3q6n9v7k/

A more correct answer would be the changing the rowspan and colspan.
Instead of
<tr>
<td rowspan="3">QUESTIONS</td> //
<td colspan="2" rowspan="2">WOMEN</td>
<td colspan="2" rowspan="2">MEN</td>
</tr>
Do this
<tr>
<td rowspan="2">QUESTIONS</td>
<td colspan="2" rowspan="1">WOMEN</td>
<td colspan="2" rowspan="1">MEN</td>
</tr>
Also remove :
<tr>
<td> </td>
</tr>
check out Fiddle

How to make one <td> span both columns in a two column table?

How can I create a table like the above example in HTML and CSS.
I've tried the following:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?

You should use colspan for your second row. Like this :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan

<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>
colspan will help you. Link to more info.