I have following table:
I can't make To and from columns to be equal - they should be half of row. I tried many different colspan cases, but these tds are not half of row.
How could I do that?
<table>
<tr>
<td colspan="5">
some text
<br>
</td>
<td colspan="6">
another text
<br>
</td>
<td colspan="6">
Logo
<br>
</td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="12">
some text
</td>
</tr>
<tr style="height:30px;">
<td> </td>
</tr>
<tr>
<td colspan="6">
<?php echo 'To');?>:</td>
<td colspan="6">
<?php echo 'From';?>:</td>
</tr>
First of all you need to understand the colspan property. colspan is used to manage the span of child col with respect to parent. This means if first has three and next has ONE , it means it needs colspan TWO to get in line with parent. You can find this by border='1' property to table
See here
<table border="1">
<tr>
<td>
some text
<br>
</td>
<td >
another text
<br>
</td>
<td>
Logo
<br>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 13px;" colspan="3">
some text
</td>
</tr>
<tr style="height:30px;">
<td colspan="3"> </td>
</tr>
<tr>
<td><?php echo 'To');?>:</td>
<td colspan="2">
<?php echo 'From';?>:</td>
</tr>
Above you cans see my max colspan is THREE since the first has three rows
Check this fiddle http://jsfiddle.net/anandgh/y1gsqeq6/
Related
I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO
I have issue with positioning some text in a table.
I have two columns that have colspan="4" - these are first column and second column:
It should looks like this:
first column second column
some text Value Currency
100 USD
3000 USD
But as I've done it, it looks like that:
first column second column
some text Value Currency
100 USD
3000 USD
12000 USD
400 USD
Here is my real code:
<tr>
<td colspan="4">
First column
</td>
<td colspan="4">
Second column
</td>
</tr>
<tr class="empty"><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
<?php echo 'Price';?>:
</td>
<td colspan='1' style="text-align: right">
<?php echo 'Value';?>
</td>
<td style="padding-left:10px" colspan='1' >
<?php echo 'Currency';?>
</td>
<td colspan='2'> </td>
</tr>
<tr>
<td colspan="4">
</td>
<td colspan="1" style="text-align: right"><?php echo $price; ?></td>
<td colspan="1" class="pull-right"><?php echo $currency; ?></td>
<td colspan="2" style="height:10px;"> </td>
</tr>
.pull-right {
padding-left: 10px;
}
You have a few problems with this code. First, you should always nest your rows within a table. Second, what you have with value and currency is supposed to be a nested table, but you are trying to reproduce that kind of layout without the proper html. Try using the following template to accomplish your goal. I have tested it and it does produce the exact layout you had asked for.
<table>
<tr>
<td colspan="2" style="text-align: center;">
First Column
</td>
<td colspan="2" style="text-align: center;">
Second Column
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align:top;text-align: center;">
Some Text
</td>
<td colspan="2">
<table style="text-align: center; width: 100%">
<tr>
<td>
Value
</td>
<td>
Currency
</td>
</tr>
<tr>
<td>
100
</td>
<td>
USD
</td>
</tr>
<tr>
<td>
3000
</td>
<td>
USD
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the result (borders added):
no need to force colspans on this table, it looks like it can simply be done with three td's per tr
heres how I rebuilt the table:
<table>
<tr>
<td>First column</td>
<td>Second column</td>
<td> </td>
</tr>
<tr class="empty">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><?php echo 'Price';?>:</td>
<td style="text-align: right;"><?php echo 'Value';?></td>
<td style="padding-left:10px;"><?php echo 'Currency';?></td>
</tr>
<tr>
<td style="height:10px;">Some Text</td>
<td style="text-align: right;"><?php echo $price; ?></td>
<td style="padding-left:10px;"><?php echo $currency; ?></td>
</tr>
</table>
To achieve what I think you meant how it should look like, consider this code:
<table>
<tr>
<td colspan="4">First Column</td>
<td colspan="4">Second Column</td>
</tr>
<tr>
<td rowspan="3" colspan="4" style="vertical-align:top;">Some Text</td>
<td>Value</td><td colspan="3">Currency</td>
</tr>
<tr>
<td>100</td>
<td colspan="3">USD</td>
</tr>
<tr>
<td>3000</td>
<td colspan="3">USD</td>
</tr>
</table>
But I don't see a sense in the colspan="4" on the first and second column. If you remove all the colspan attributes and just add colspan="2" to the row with "second column" it will look the same and be less complicated.
You need to remove <td colspan="2" style="height:10px;"> </td> to get the desired results. And instead of using <td colspan='1'> on other columns, use <td colspan='2'> instead.
HTML
<table>
<tr>
<td colspan="4">
First column
</td>
<td colspan="4">
Second column
</td>
</tr>
<tr class="empty"><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
Price
</td>
<td colspan='2' style="text-align: right">
Value
</td>
<td style="padding-left:10px" colspan='2' >
Currency
</td>
</tr>
<tr>
<td colspan="4"></td>
<td colspan="2" style="text-align: right">Price 1</td>
<td colspan="2" class="pull-right">Currency 1</td>
</tr>
</table>
Working Fiddle
PS: You don't need to print those static texts using PHP echo
Change from:
<td colspan="4">
<?php echo 'Price';?>:
</td>
To:
<td colspan="4">
Price:
</td>
I am making a html page in which i am using table for the some items. as below image shows:
The code for the this table is as bellow:
<table border="2">
<tbody><tr>
<td width="50">
<b>
<span style="color:red">
Id
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Name
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
<td width="50"></td>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td><i>$3.5</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
</tbody></table>
Now my problem is that why the line of the header is not completed so how to do it? I am new to html and css and I am learning it. Please need guidance. Thank you.
You have more columns in the bottom rows.
There are many solutions:
One (not so pretty) way to solve your problem would be to add more cells in the top row.
<td width="50"> </td>
<td width="50"> </td>
( http://jsfiddle.net/tCrRG/ )
Or, try to take a look at colspan and rowspan:
<td width="150" colspan="3">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
( http://jsfiddle.net/tCrRG/1/ )
Or, add just one cell in the top row with colspan:
<td colspan="2">
</td>
( http://jsfiddle.net/tCrRG/2/ )
Empty cells are no be displayed and you could use space or html entity to put some empty content.
You could use colspan attribute to make the cell extend for 2 columns.
<table border="2">
<tbody><tr>
<td width="50">
<b>
<span style="color:red">
Id
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Name
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
<td width="50" colspan="2"> </td>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td><i>$3.5</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
</tbody></table>
I think you want an empty cell above the Edit/Delete links and not increasing the Product Price cell.
Therefore try a colspan=2 in your empty cell
<td colspan="2" width="50"></td>
instead
<td width="50"></td>
in your first row.
The only put three cells in the header row when there are five cells in the subsequent rows. To make the third header column fill out to the right, use colspan=3:
<td width="150" colspan=3>
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
On a side note, as noted by others above, it's not good practice to use inline styling or nest style markup. Try looking into using a CSS class for your column headers:
HTML:
<td class="header_cell">
Product Price
</td>
CSS:
.header_cell {
width:150px;
color:red;
font-weight:bold;
}
I've improved your code quite a bit.
<style type="text/css">
table {
width: 400px;
}
table th{
font-weight: bold;
color: red;
}
table tr td:nth-child(3) {
font-style: italic;
}
</style>
<table border="2">
<tbody>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Price</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td>$3.5</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td>$75.29</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td>$22.81</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
Explanation
Removed the used of presentational markup. Replaced with a <style> element.
Replace the header cells with appropriate <th> elements.
Added an Actions header with a colspan="2", which means it will strech for 2 columns (filling up the remaining space).
I don't have much experience with html, but I tried to make a simple table and I get extra cells in it, I don't know why.
Here is the code:
<table border="1">
<tr>
<td colspan="5"> hi <td>
<td colspan="3"> hi <td>
</tr>
<tr>
<td colspan="3"> hi <td>
<td colspan="5"> hi <td>
</tr>
</table>
I expect this to have two rows with 2 cells in each, in first row first cell is bigger, and in second row second cell is bigger. But for some reason I get 4 cells in each row, like this:
.
You didn't terminate your <td>.... You need a </td> at the end.
Working Fiddle
http://jsfiddle.net/GFdP6/3/
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Furthermore
If you want it to look like you'd expect, you will have to set some widths on your td's like I did in the fiddle.
You have used TD Start Tags when you want TD End Tags. So you have 4 TD elements in each row instead of 2. (Note that the end tag for TD is optional so this is valid).
It's a typo... The closing TD tags are missing.
<table border="1">
<tr>
<td colspan="5"> hi --> close your tags here --> </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Missing closing tags for <td>.
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
How can I align all table rows come correctly aligned even if they have content length differences.
Here is the fiddle. Please have a look at this.. They are coming vertically aligned.. But I want them one after another like below
One 1 Yes
Two 2
Three
http://jsfiddle.net/cKj98/1/
vertical-align: top;
?
Do something like this:
<table>
<tr>
<td width="50px">
One
</td>
<td>
1
</td>
<td>
Yes
</td>
</tr>
<tr>
<td width="50px">
Two
</td>
<td colspan="2">
2
</td>
</tr>
<tr>
<td colspan="3">
Three
</td>
</tr>
</table>
Good ways to style the table cells are: "padding", "text-align", vertical-align", "height", "width", and so on..
This might be what you seek
<table>
<tr>
<td>
One
</td>
<td>
1
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Two
</td>
<td colspan='2'>
2
</td>
</tr>
<tr>
<td colspan='3'>
Three
</td>
</tr>
<table>