Like in Excel sheet can I have
2 columns in 1st row
1 long column in the 2nd row
is this possible in html ?
On the realisation that you're unfamiliar with colspan, I presumed you're also unfamiliar with rowspan, so I thought I'd throw that in for free.
One important point to note, when using rowspan: the following tr elements must contain fewer td elements, because of the cells using rowspan in the previous row (or previous rows).
table {
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th colspan="2">Column one and two</th>
<th>Column three</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2">A large cell</td>
<td>a smaller cell</td>
</tr>
<tr>
<!-- note that this row only has _one_ td, since the preceding row
takes up some of this row -->
<td>Another small cell</td>
</tr>
</tbody>
</table>
Colspan:
<table>
<tr>
<td> Row 1 Col 1</td>
<td> Row 1 Col 2</td>
</tr>
<tr>
<td colspan=2> Row 2 Long Col</td>
</tr>
</table>
yes, simply use colspan.
If you need different column width, do this:
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
Related
I need to design a HTML table as the attachment below but I seem to be struggling due to my lack of understanding in HTML table.
This is what I've come up with so far but as you can see, it's not even close to the end result. I hope that someone can point me in the right direction.
<section class="mb-5">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Heading -->
<h2 class="mb-3">
Task activities reports
</h2>
<div class="table-responsive border">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Service</th>
<th scope="col">Category</th>
<th scope="col">
<table>
<thead>
<tr>
<th colspan="10">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
</tr>
</thead>
</table>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Clipping path</td>
<td>Category 1</td>
<td>
<table>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
You need to use the colspan and rowspan attributes, not nested tables. colspan tells a cell to span the width of two columns, and rowspan tells it to span the height of two rows.
I've rendered your header rows and the first three rows of content based on what I said here. The rest of the table content follows the same principles.
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th rowspan="2">Service</th>
<th rowspan="2">Category</th>
<th colspan="11">Percent completed</th>
</tr>
<tr>
<th>10%</th>
<th>20%</th>
<th>30%</th>
<th>40%</th>
<th>50%</th>
<th>60%</th>
<th>70%</th>
<th>80%</th>
<th>90%</th>
<th>100%</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="6">Clipping Path</td>
<td>Category 1</td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1000</td>
<td>1005</td>
</tr>
<tr>
<td>Category 2</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td>1100</td>
<td>1105</td>
</tr>
<tr>
<td>Category 3</td>
<td></td>
<td></td>
<td></td>
<td>5</td>
<td></td>
<td></td>
<td>4</td>
<td></td>
<td></td>
<td>1200</td>
<td>1209</td>
</tr>
</tbody>
</table>
I've added CSS for borders so you can see the edges of the cells.
It's a little hard to get used to at first, because you have to ignore the presence of the cells in the rows where they "grow" to from where they were declared. Thus I've applied rowspan="2" to the Service heading, and that cell "grows" into the next row, along with Category. So that 10% heading shows up below Percent (since it only spans 1 row) because Service and Category are taking up space in the row though never declared in the <tr>.
Generally we make rowspan and colspan after the first column of the table. But in my case I want to draw a table like in this photo :
How to achieve it ?
To solve these problems, imagine everything is expanded and each block is a significant part of the table definition. Using that information, you have 19 columns and 2 rows. From there you allocate your groups:
"Valeurs Cibles Cumulees" has a colspan of 4.
"Chronogramme" has a colspan of 12.
"Taches", "Source of Financement", and "Responsables" have a rowspan of 2.
Here you go:
table,
td {
border: 1px solid #999;
}
table {
width: 400px;
height: 50px
}
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
<td colspan="12"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I've made a html table and when I finished I noticed I made a mistake by having one row with 5 columns while all the others have 3. Is it possible to fix it by making 2 columns only half a column wide or auto adjust it using only html? I do not want to use colspan because its a pretty large table.
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Nested table
If you absolutely don't want to use colspan, you could try nesting a table:
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Defining colspan might solve your problem.
colspan must be specified based on the row with largest column.
It is actually used to extend 2 or more columns as per your wish.
It also hugely depends on underlying columns.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>these should be<td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
This must solve your issue.
EDIT: Since you need to span it without the use of colspan, you can use nested table.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>this should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
The above method goes little bit tricky. For this example it is easy to implement using above snippet. But for your exact solution, since you need to use it for rows with 5 columns.
MERGE 5 columns into 1 and span it to 3 columns:(as implemented below)
<tr>
<td colspan="3">
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>
</td>
</tr>
<table border="1">
<tr>
<td colspan="2">something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2"> something </td>
</tr>
</table>
please see colspan definition here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
I have a table with html as follows:
<div id="cart">
<table>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th >Price</th>
<th>Qty</th>
<th >Options</th>
<th >Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-pid">5</td>
<td class="item-name"></td>
<td class="item-price"></td>
<td class="item-quantity">1</td>
<td class="options">color</td>
<td class="item-total">$23.52</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Sub-Total</td>
<td class="third">5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Shipping Option</td>
<td class="third">EMS</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<th>Grand Total</td>
<td class="third">100</td>
</tr>
<CAPTION ALIGN="bottom">
This is the table's bottom caption
</CAPTION>
</tbody>
</table>
</div>
I need the last three row columns Sub-total, shipping option and grand total to be as a standalone single column with all td 's prior to it removed. currently i am adding:
<td><td><td><td>
to align it to right. All prior cells are displaying blank. I want all those cells removed and the last 3 cells aligned to right.
How is that possible?
I have a Fiddle Demo here..
Help Requested. Thanks in advance.
You can change those 3 rows code into this:
<tr>
<td colspan="5" style="text-align:right;">Sub-Total</td>
<td class="third">5</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">Shipping Option</td>
<td class="third">EMS</td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">Grand Total</td>
<td class="third">100</td>
</tr>
You can use colspan to merge the colums and text-align:right for the text to align right.
Check out this Fiddle..
Is that possible not to indent cells in th?
http://jsfiddle.net/kWTte/1/
HTML
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
<td></td>
</tr>
</table>
You can think of th as the equivalent of td, but for table's header.
So ths should be contained into a tr element.
The correct form is:
<table>
<tr>
<th>Header one</th>
<th>Header two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
If you need to wrap the table header you could use thead.
Similarly you could use tbody for the body of the table (note that you can have more than one tbody in the same table).