Hi I am trying to create a table with html tags for my requirement but couldn't be able get when I tried.
My requirement is below.
What I am able to get is
Is it possible to get this using html table tags. Kindly help me pls
Simple, with colspan and rowspan see example below.
With colspan you can merge multiple row into one section
colspan
This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).
With rowspan you can merge col into one.
rowspan
This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined, that the cell belongs to. Values higher than 65534 are clipped down to 65534.
REF: https://developer.mozilla.org/en/docs/Web/HTML/Element/td
table {
border-spacing: 0;
text-align: center;
}
<table border="1">
<tr>
<th colspan="11">Northern District</th>
</tr>
<tr>
<td rowspan="2">Alfreds Futterkiste</td>
<td rowspan="2">Maria Anders</td>
<td colspan="3">Germany</td>
<td colspan="3">Maria Anders</td>
<td colspan="3">Alfreds Futterkiste</td>
</tr>
<tr>
<td>Centro</td>
<td>Francisco</td>
<td>Mexico</td>
<td>Centro</td>
<td>Francisco</td>
<td>Mexico</td>
<td>Centro</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
</table>
Search for the HTML attributes colspan and rowspan for td elements - that's what you need in this situation.
(for example here: https://www.w3schools.com/tags/tag_td.asp )
<table>
<tr>
<th colspan=11>Northern District
<tr>
<td rowspan=2>Customers
<td rowspan=2>Salesman
<td colspan=3>Gas
<td colspan=3>Diesel
<td colspan=3>Total
<tr>
<td>Volume
<td>Netback
<td>Profit
<td>Volume
<td>Netback
<td>Profit
<td>Volume
<td>Netback
<td>Profit
</table>
Related
In this Html table , how could I insert the cells "XPath" and "XSL transformations" as each of them covers 1.5 row (the 2 cells cover equally 3 rows).
How should I use the "rowspan" attribute ?
<td rowspan = "number">table content...</td>
Another example
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ajay</td>
<!-- This cell will take up space on two rows -->
<td rowspan="2">24</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
I want to add two rows inside a td like below picture but I can't find any solution of this.
You can do by using nested table
http://www.corelangs.com/html/tables/table-inside-table.html
You Have Asked (How can i add tr inside td)
To have tr inside td the only way is create another table inside td than you can have tr inside td.
Example :
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>
But the image you have added it represent that you want to merge two rows for that you need to use Row Span.
Example for Row Span ( https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan )
Try using rowspan attribute in the cell.
https://www.w3schools.com/tags/att_td_rowspan.asp
Maybe you can use the rowspan attribute on td tags in your HTML: https://www.w3schools.com/tags/att_td_rowspan.asp
Example:
<table>
<tr>
<th>B/B LC NO Value USD</th>
<th>ABP Value USD</th>
<th>Exp N& Date</th>
</tr>
<tr>
<td rowspan="2">$ xxxxx<br/>$ -</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>$1</td>
<td>$80</td>
</tr>
</table>
You can give the fiels that you don't want to divide into two rowspan="2" and then skip the fields that would normally be under them.
<table>
<tr>
<td rowspan="2">Margaret Nguyen</td>
<td>427311</td>
<td><time datetime="2010-06-03">June 3, 2010</time></td>
<td>0.00</td>
</tr>
<tr>
<td>533175</td>
<td><time datetime="2011-01013">January 13, 2011</time></td>
<td>37.00</td>
</tr>
</table>
I need the html table for the following table structure.
This is something similar I have tried till now: (this is a .cshtml view, which takes a model as input)
<table>
<tbody>
<tr>
<th>Code Number of Equipment</th>
<th>Name of Equipment</th>
<th>Brand</th>
<th>Model</th>
<th>Quantity</th>
<th>Check Item</th>
<th>Note</th>
<th>Quoted Price</th>
</tr>
#foreach (var equipment in Model.Equipments)
{
<tr>
<td>#equipment.Code</td>
<td>#equipment.Name</td>
<td>#equipment.EquipmentBrand</td>
<td>#equipment.EquipmentModel</td>
<td>#String.Format("{0:n0}", equipment.Quantity)</td>
<td colspan="2">
<table >
<tbody >
#foreach (var item in equipment.EligibilityChecksheets)
{
<tr>
<td>#item.CheckListItem</td>
<td>#item.Note</td>
</tr>
}
</tbody>
</table>
</td>
<td>#String.Format("{0:n0}", Model.Currency + " " + equipment.UnitPrice)</td>
</tr>
}
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Total : </th>
<th>#String.Format("{0:n0}", Model.Currency + " " + Model.TotalPrice)</th>
</tr>
</tbody>
</table>
The problem with this code is - there is a gap between <td> and the inner table. I want to do this work using rowspan - is it possible to do it for this scenario?
When you are making an HTML table, the table rows of the table are constructed sequentially in HTML; i.e.- once you create a new <tr>, you can't add new <td> or other table elements in any previous <tr> directly from HTML.
For this reason, any variant of this approach will not work as you are expecting:
<table>
foreach(parent-row in parent-table)
{
<tr>
<!-- parent table data of each row in "td"s with rowspan -->
foreach(child-row in child-table)
{
<tr>
<!-- child table data of each row in "td"s without rowspan -->
</tr>
}
<!-- remaining parent table data of each row in "td"s with rowspan -->
</tr>
}
</table>
One thing I can think of about how you can do what you are asking for is -
completely construct the first row - including the first row of the child table. After constructing that row, you can construct the remaining rows of the child table for that particular parent table row.
In code, the approach will be something like this (considering rowspan = 'number of rows in child table for a particular row in the parent table'):
<table>
foreach(parent-row in parent-table)
{
<tr>
<!-- parent table data of each row in "td"s with rowspan -->
foreach(child-row in child-table) // this loop will iterate only once
{
<!-- child table data of first row in "td"s without rowspan -->
}
<!-- remaining parent table data of each row in "td"s with rowspan -->
</tr>
<!-- parent table row with first row of child table for that parent table row created -->
<!-- creating the remaining rows of the child table -->
foreach(child-row in child-table) // this loop will iterate (rowspan - 1) times
{
<tr>
<!-- child table data of each row except first row in "td"s without rowspan -->
</tr>
}
} // parent table row with its corresponding child table fully constructed
</table>
Something I've recently discovered is that I can set a table cell to have multiple axises using a combination of the headers property on the td and the axis property on any related th. Example:
<table>
<caption>Country Toy Codes</caption>
<thead>
<tr>
<th scope="col row"></th>
<th scope="col" id="us" axis="country">US</th>
<th scope="col" id="ca" axis="country">CA</th>
<th scope="col" id="uk" axis="country">UK</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="robots" axis="toys">Robots</th>
<td headers="us robots">ABC</td>
<td headers="ca robots">DEF</td>
<td headers="uk robots">GHI</td>
</tr>
<tr>
<th scope="row" id="dolls" axis="toys">Dolls</th>
<td headers="us dolls">JKL</td>
<td headers="ca dolls">MNO</td>
<td headers="uk dolls">PQR</td>
</tr>
<tr>
<th scope="row" id="slinkys" axis="toys">Slinkys</th>
<td headers="us slinkys">STU</td>
<td headers="ca slinkys">VWX</td>
<td headers="uk slinkys">YZ1</td>
</tr>
<tr>
<th scope="row" id="legos" axis="toys">Legos</th>
<td headers="us legos">AB1</td>
<td headers="ca legos">CD1</td>
<td headers="uk legos">EF1</td>
</tr>
</tbody>
</table>
This has clear benefits for non-visual browsers, but I was thinking it could also be useful for javascript and css. The only problem is that I'm not seeing a way to directly access the axis type of the header id of the cell, either after selecting or for selection purpose.
Ideally, I would like to do either of the following (rough pseduo-code ahead):
Selector:
td['axis=toys'] // Would select all td's with a header id that resolves to a header having axis value "toys"
Getter:
$('td').axisValue("toys") // would return the value, if applicable, of header id of header value with axis value of toys.
For the getter, I could loop through each header each time and find the element from the id in the DOM and then the axis value, but if there is a way to do this more directly, I'm sure it's also more optimized by the browser.
For the selector, the closest I can think of (in js) is to take the given axis value, find all ids using that axis value and then comma-separate each option to grab them all, such as
[headers~=us], [headers~=ca], [headers~=uk]
Does anyone know if header id's axis name is available either via a method or directly on the td element?
I want to validate my page but w3c keeps giving me this warning. I want to get rid of it but I can't seem to find the cause of it.
It gives me this error:
A table row was 2 columns wide and exceeded the column count established by the first row (1).
Table and CSS code:
<table>
<tr>
<td>Contact informatie</td>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
<tr>
<td>Email:</td>
<td>info#blabla.nl</td>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
table {
border:none;
padding-left:75px;}
td:first-child {
width:135px;
border:none;
text-align:left;}
td+td {
border:none;
text-align: left;}
Anyone any suggestions?
It means exactly what it says. One of the rows in your table has too many columns. Specifically, the first row has less columns that a subsequent row. But we can't do much unless you post some code.
Edit
The markup for the table is incorrect.
You only have one cell in the first row (or do what PeeHaa suggested)
You need to close off each row with </tr>
Just change this:
<tr>
<td>Contact informatie</td>
</tr>
To this:
<tr>
<td colspan="2">Contact informatie</td>
</tr>
YOu should always close you tablerows (tr): </tr>.
Final version:
<table>
<tr>
<td colspan="2">Contact informatie</td>
</tr>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
</tr>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
</tr>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
</tr>
<tr>
<td>Email:</td>
<td>info#vazcreations.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
In extension to what SimpleCoder said, if you have the first row of a table have only one column, then the futher ones can have no more then one column. If you want to get around this you need to put a table inside the cell i.e.
<td>
<table>
<tr>
<td><!-- Content here --></td>
</tr>
</table>
</td>