Is there a more elegant solution to achieve the same effect as this?
The code I've got so far is this:
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table { border-collapse: collapse; }
td { border: solid 1px; }
td.nest { padding: 0px; }
td.nest table td { border-width: 0px 1px; }
td.nest table td:first-child { border-left: none; }
td.nest table td:last-child { border-right: none; }
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 3em;"/>
<col style="width: 6em;"/>
<col style="width: 9em;"/>
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><!-- Somehow get rid of the nested table and keep just the tds -->
<td class="nest" colspan="3">
<table>
<tr>
<td style="width: 4em;">1</td>
<td style="width: 6em;">2</td>
<td style="width: 8em;">3</td>
</tr>
</table>
</td>
</tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>
The only way I can get this working so far is to nest another table inside the first. I don't like it much because ideally I only want one table and there's a lot of extra CSS to match the borders of the first table without adding to the cell (colspan="3") size. I want to be able to replace the nested table with just a normal <tr> with three <td>s in it.
The only other way I've found to change the width of one cell without affecting the other cells in the column is with position: absolute; but then the next cell in the row is shifted to the left by the width of the adjusted cell, so that doesn't work fully. It's also too hard to get the widths just right.
So, is there any way to get the same effect using just one table, no extra <div>s, etc. and just simple CSS? This example should have only one <table>, nine <td>s and no colspan=s. I'm looking for a pure CSS solution if one exists. It should be able to cope with any arbitrary widths as long as they add up to the original width.
No, this is not possible without subtables.
What you are trying to do is against the idea of tabular data presentation.
If you don't want a table, don't use a table.
You could however put your data into divs with style="display: table-cell;".
On a second thought, you could use colspan in all 3 rows.
So your table actually looks like this:
<col style="width: 3em;"/>
<col style="width: 1em;"/>
<col style="width: 5em;"/>
<col style="width: 1em;"/>
<col style="width: 8em;"/>
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<table >
<colgroup>
<col style="width: 3em;" />
<col style="width: 1em;" />
<col style="width: 5em;" />
<col style="width: 1em;" />
<col style="width: 8em;" />
</colgroup>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
</table>
</body>
</html>
Yes...but you'll have to use some CSS trickery to 'fake' it.
What the below does is use psuedo elements for the inner borders, offsetting them as appropriate for the middle row.
Demo Fiddle
CSS
table {
border-collapse: collapse;
table-layout:fixed;
}
td {
border: solid 1px;
border-width:1px 0px 1px 0px;
width:33%;
position:relative;
}
td:nth-child(1) {
border-left:solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
td:after {
content:'';
position:absolute;
right:0;
border-right:1px solid black;
top:0;
bottom:0;
}
tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
right:-20px;
}
tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
padding-left:25px;
}
HTML
<table>
<colgroup>
<col style="width: 3em;" />
<col style="width: 6em;" />
<col style="width: 9em;" />
</colgroup>
<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>
</table>
You can use next html for example :
<table style="width: 300px;">
<colgroup>
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
<col span="1" style="width: auto;">
</colgroup>
<tbody>
<tr>
<td></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
You have to use the unit % instead of pixels its work for me.
width:30%
Related
I would like to force my HTML table to have a width by only having for each column.
What I have right now is the code below. I've removed some of the other code that doesn't apply. It is not overflowing properly and the table is only being rendered at 100% width of my screen.
#example_table {
border-collapse: collapse;
table-layout: fixed;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
overflow-x: scroll;
overflow-y: visible;
width: 100%;
}
<div class="zui-wrapper">
<div class="zui-scroller">
<table id="example_table">
<thead>
<tr>
<th style="width: 75px;">Col1</th>
<th style="width: 50px;">Col2</th>
<th style="width: 200px;">Col3</th>
<th style="width: 70px;">Col4</th>
<th style="width: 70px;">Col5</th>
<th style="width: 70px;">Col6</th>
<th style="width: 70px;">Col7</th>
<th style="width: 100px;">Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ex1</td>
<td>Ex2</td>
<td>Ex3</td>
<td>Ex4</td>
<td>Ex5</td>
<td>Ex6</td>
<td>Ex7</td>
<td>Ex8</td>
</tr>
</tbody>
</table>
</div>
</div>
I've also tried adding the width="xx" to each of the rows. I do not wish to use width="xx" under the #example_table CSS because I have a javascript code that hides some rows, and when that is done, the table examples to that same width.
I've also tried many different CSS combinations of overflow in the different classes/IDs. Any help is greatly appreciated!
You can use <colgroup> to precise the width of the columns.
Here is an example:
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
border-style: solid;
border-width: 1px;
}
.tg th {
padding: 10px 5px;
border-style: solid;
border-width: 1px;
}
<table class="tg" style="undefined;table-layout: fixed; width: 700px">
<colgroup>
<col style="width: 75px">
<col style="width: 50px">
<col style="width: 200px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 70px">
<col style="width: 100px">
</colgroup>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
<tr>
<td>Ex1</td>
<td>Ex2</td>
<td>Ex3</td>
<td>Ex4</td>
<td>Ex5</td>
<td>Ex6</td>
<td>Ex7</td>
<td>Ex8</td>
</tr>
</table>
I managed to kinda achieve my intended design but it feels kinda like a hack.
So I'm working with this table and now cell size looks exactly as I'd like it to be, but I have to add extra row on top of my table (and hide it, but not in example so it's easier to understand). So if you try and delete that top row you can see how it all gets messed up (description fields don't look the same).
http://jsfiddle.net/nooorz24/cea57mhd/4/
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
</tr>
<tr>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;" colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;">Description text</td>
</tr>
</table>
As far as I can understand it's because I try to set width to a cell that has colspan="2" and html doesn't understand how to work with that.
Can this be solved without adding extra row?
You can use the HTML col element which is designed just for that: styling or defining common attributes for an entire column.
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 1px">
<col style="width: 10000px;">
<col style="width: 1px">
<col style="width: 10000px;">
</colgroup>
<tr>
<td>IMG</td>
<td colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td>IMG</td>
<td>Description text</td>
</tr>
</table>
When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I "obliged" to do it?
E.g.:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
OR the following could also be the right procedure, not to write the width in each tds if I want each of them to be devided equally:
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I know it works with both manners but I just want to know the "legit" way to do it.
Use the property table-layout:fixed; on the table to get equally spaced cells. If a column has a width set, then no matter what the content is, it will be the specified width. Columns without a width set will divide whatever room is left over among themselves.
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
Just to throw it out there, you could also use <colgroup><col span='#' style='width:#%;'/></colgroup>, which doesn't require repetition of style per table data or giving the table an id to use in a style sheet. I think setting the widths on the first row is enough though.
You need to enter the width % for each cell. But wait, there's a better way to do that, it's called CSS:
<style>
.equalDivide tr td { width:25%; }
</style>
<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Yes, you will need to specify the width for each cell, otherwise they will try to be "intelligent" about it and divide the 100% between whichever cells think they need it most. Cells with more content will take up more width than those with less.
To make sure you get equal width for each cell you need to make it clear. Either do it as you already have, or use CSS.
table.className td { width: 25%; }
you can try this, I would do it with CSS, but i think you want it with tables without CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519.
In combination with table-layout: fixed I often find <colgroup> a great tool to make columns act as you want (see codepen here):
table {
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
table-layout: fixed;
}
.fixed-width {
width: 100px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.666666667%;
}
.col-10 {
width: 83.333333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.666666667%;
}
.col-7 {
width: 58.333333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.666666667%;
}
.col-4 {
width: 33.333333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.666666667%;
}
.col-1 {
width: 8.3333333333%;
}
/* Stylistic improvements from here */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
table {
width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
padding: 8px;
border: 1px solid gray;
}
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col /> <!-- take up rest of the space -->
<col class="fixed-width" /> <!-- fixed width -->
<col class="col-3" /> <!-- percentage width -->
<col /> <!-- take up rest of the space -->
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<!-- define everything with percentage width -->
<colgroup>
<col class="col-6" />
<col class="col-1" />
<col class="col-4" />
<col class="col-1" />
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
I've got a simple table that is used for an inbox as follows:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">15%</td>
<td style="background-color: #aaa">70%</td>
<td style="background-color: #777">15%</td>
</tr>
</tbody>
</table>
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>
The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns (HTML for structure and semantics, and CSS for presentation).
Note that, for this to work in older versions of Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn't have exact dimensions.
Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you'll need to add the classes in your HTML):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>
More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you'd just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
These are my two suggestions.
Using classes. There is no need to specify width of the two other columns as they will be set to 15% each automatically by the browser.
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
Without using classes. Three different methods but the result is identical.
a)
table { table-layout: fixed; }
th+th { width: 70%; }
th+th+th { width: 15%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
b)
table { table-layout: fixed; }
th:nth-of-type(2) { width: 70%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
c) This one is my favourite. Same as b) but with better browser support.
table { table-layout: fixed; }
th:first-child+th { width: 70%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
Add colgroup after your table tag. Define width and number of columns here, and add the tbody tag. Put your tr inside of tbody.
<table>
<colgroup>
<col span="1" style="width: 30%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<td>First column</td>
<td>Second column</td>
</tr>
</tbody>
</table>
Depending on your body (or the div which is wrapping your table) 'settings' you should be able to do this:
body {
width: 98%;
}
table {
width: 100%;
}
th {
border: 1px solid black;
}
th.From, th.Date {
width: 15%;
}
th.Date {
width: 70%;
}
<table>
<thead>
<tr>
<th class="From">From</th>
<th class="Subject">Subject</th>
<th class="Date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
<td>Your question</td>
<td>5/30/2009 2:41:40 AM UTC</td>
</tr>
</tbody>
</table>
Demo
Try this instead.
<table style="width: 100%">
<tr>
<th style="width: 20%">
column 1
</th>
<th style="width: 40%">
column 2
</th>
<th style="width: 40%">
column 3
</th>
</tr>
<tr>
<td style="width: 20%">
value 1
</td>
<td style="width: 40%">
value 2
</td>
<td style="width: 40%">
value 3
</td>
</tr>
</table>
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
Here's another minimal way to do it in CSS that works even in older browsers that do not support :nth-child and the like selectors: http://jsfiddle.net/3wZWt/.
HTML:
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr>
<td>Dmitriy</td>
<td>Learning CSS</td>
<td>7/5/2014</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
width: 100%;
}
tr > * {
border: 1px solid #000;
}
tr > th + th {
width: 70%;
}
tr > th + th + th {
width: 15%;
}
<table>
<col width="130">
<col width="80">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Demo
Don't use the border attribute, use CSS for all your styling needs.
<table style="border:1px; width:100%;">
<tr>
<th style="width:15%;">From</th>
<th style="width:70%;">Subject</th>
<th style="width:15%;">Date</th>
</tr>
... rest of the table code...
</table>
But embedding CSS like that is poor practice - one should use CSS classes instead, and put the CSS rules in an external CSS file.
style="column-width:300px;white-space: normal;"
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
table cell width issue
I have a table set up as
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
How do i get the 2 rows to have different cell width?
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
I don't know your requirements but i'm sure there's a more elegant solution.
You can't have cells of arbitrarily different widths, this is generally a standard behaviour of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
You can however have cells span multiple columns, such as:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
As an aside, you should avoid using style attributes like border and bgcolor and prefer CSS for those.
with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>