expecting the code to for that image that i have attached
In order to create such a table, you'd need to implement the rowspan and colspan attributes. colspan represents the number of columns a cell should span (to the right), and rowspan represents the number of rows a cell should span (downward). For instance, if I had a <td colspan="2"> tag, the td element would take up the space of two columns. Here's an example of that behavior:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">This element occupies the space of two columns.</td>
</tr>
</table>
Utilizing rowspan and colspan, I was able to create code that generates a look-alike of the table you attached (CSS code solely for table visibility):
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td rowspan="2"></td>
<td colspan="2">Average</td>
<td rowspan="2">Red Eyes</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tr>
<td>Males</td>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>Females</td>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
I have tried to make this work but it always adds an extra column in the first row even when i clearly stated it has only 1 column. What i want to make is like this : this is what i want to make
But this is what i get like this
The only way to make it like the first picture is by using 2 tables which is what i used but is there no way to do it with 1 table ?
My code :my code for the second picture
Use the colspan attribute.
td {
border: solid black 1px;
height: 20px;
}
<table>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
<tr>
<td>colspan = 1</td>
<td>colspan = 1</td>
<td>colspan = 1</td>
</tr>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
</table>
You can use the colspan attribute.
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column.
Below is a working code snippet which looks almost similar to your requirement.
table, tr, td, th {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.row1, .row2 {
height: 100px;
}
.row2 {
vertical-align: top;
}
.row1, .row3 {
text-align: center;
}
<table>
<tr class="row1">
<td colspan="3">Your Name</td>
</tr>
<tr class="row2">
<td>Course 1</td>
<td>Course 2</td>
<td>Course 3</td>
</tr>
<tr colspan="3" class="row3">
<td colspan="3">Social Media accounts</td>
</tr>
</table>
context :
I work on a little csv-like script editor,
and I use an html table to display the data
As you can see there are missing cells.
That was to be expected, since I only insert the cells containing data
(and the previous cells of the row),
and the border style is only applied on cell elements for now.
I'd like All the cells to be displayed,
and I wondered if it was possible to draw the table lines
without cells, or if the only solution is to insert the missing cells ?
minimum reproducible example :
<table>
<tr>
<td>A1</td>
</tr>
<tr>
<td></td>
<td>B2</td>
</tr>
<tr>
<td></td>
<td></td>
<td>C3</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border: 2px solid #555;
}
td {
border: 1px solid #888;
}
</style>
As we know elements who do now exist will not shown you have to add as needed to your table with no data in it. and you can set your code like below.
table {
border-collapse: collapse;
border: 2px solid #555;
empty-cells: show;
}
td {
border: 1px solid #888;
}
<table>
<tr>
<td>A1</td>
</tr>
<tr>
<td></td>
<td>B2</td>
</tr>
<tr>
<td></td>
<td></td>
<td>C3</td>
</tr>
</table>
I have 6 columns & I want to use colspan for 3&4 and 5&6 column.
And I don't want to show 1st & 2nd column for that particular row.
How to hide 1&2 column in that row?
Desired output..
Remove the border from the cells you wish to "hide". They are still there, but visually absent.
Have a fiddle!
Experimental fiddle for a table { border: xxx; } fix.
In this example I am targeting the cell with tbody tr:first-child td:first-child. This could obviously also be targeted with a class.
HTML
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
width: 500px;
}
td {
border: solid 1px #000;
padding: 10px;
}
tbody tr:first-child td:first-child {
border: none;
}
Use display:none; in your CSS File on the 1st & 2nd Column.
You can select them with:
td:nth-of-type(1),
td:nth-of-type(2) {
display:none;
}
Use visibility:hidden on the first two columns of the row.
Try to use visibility: hidden; empty-cells: hide; for that cells.
Here is a fiddle
HTML
<table border="1">
<thead>
<tr>
<td colspan="2" style="border: 0;">a1</td>
<td colspan="2">a3</td>
<td colspan="2">a5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>5555</td>
</tr>
</tbody>
</table>
CSS
table {
border: none;
border-collapse: collapse;
}
So it is pretty straight forward. I need a way to group cells together. Like a <div> or a <span> but none of them worked. <tbody> seemed like a good solution but it only works for table rows. Help!
If you're looking for a way to merge 2 o more cells in a row into one single cell, along with other "regular" cells (as you would do in a google|excel spreadsheet) in a way similar to this:
then you can use the colspan attribute for td elements, indicating how many cells are you merging:
<tr>
<td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
<td> Regular cell </td>
<td> Another cell in same row </td>
</tr>
Additionally, you can use the td[colspan] selector in css (combined with any parent selector of your choice) to refer to these merged cells.
Here's a working example:
/* Style for cells with any colspan attribute */
td[colspan] {
text-align: center;
}
/* No extra space between cells */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
margin: 0;
padding: 3px 10px;
text-align: right;
}
<table>
<tr>
<th>Day</th>
<th>Invoice</th>
<th>Total</th>
</tr>
<tr>
<!-- this cell will occupy 3 columns -->
<td colspan=3>January</td>
</tr>
<tr>
<td>2</td>
<td>0348</td>
<td>248.35</td>
</tr>
<tr>
<td>7</td>
<td>0349</td>
<td>126.14</td>
</tr>
<tr>
<td>18</td>
<td>0350</td>
<td>821.99</td>
</tr>
<tr>
<td colspan=3>February</td>
</tr>
<tr>
<td>27</td>
<td>0351</td>
<td>643.50</td>
</tr>
</table>
You can add the html col tag to group the columns td.
.col-group-1 {
background-color: yellow;
}
.col-group-2 {
background-color: silver;
}
<table>
<colgroup>
<col class="col-group-1">
<col span="2" class="col-group-2">
</colgroup>
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Mary</td>
<td>New york</td>
<td>987654321</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Los Angeles</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
Please check out the html col tag
and how to use them with css styling