CODEWITHSUNDEEP
htmlhtml-table
user09
user09

Reputation: 956

HTML table design issues

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.

enter image description here

What I am able to get is enter image description here

Is it possible to get this using html table tags. Kindly help me pls

Upvotes: 1

Views: 77

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

Jack
Jack

Reputation: 183

<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>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

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 )

Upvotes: 0

Related Questions