I have such table: http://jsfiddle.net/jDTTx/
I can't understand how to split cell with text 1 into 2 horizontal cells. Could you help me with this?
You will want to set the rowspan for all of the cells in the row above it to 2, and leave the row span for the two cells which you would like to appear split as 1.
See it in action: http://jsfiddle.net/jDTTx/6/
<table border="1" style="border: 2px solid black; width: 50%; margin: 0 auto; text-align: center; font-weight: bold" cellpadding="0" cellspacing="0">
<thead style="background-color: gray; color: white">
<tr>
<td>№</td>
<td>Час</td>
<td>АУД. 402</td>
<td>АУД. 402<sup>A</sup></td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">8<sup><u>00</u></sup> - 9<sup><u>20</u></sup></td>
<td>1a</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>1b</td>
</tr>
<tr>
<td>2</td>
<td>9<sup><u>35</u></sup> - 10<sup><u>55</u></sup></td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>11<sup><u>15</u></sup> - 12<sup><u>35</u></sup></td>
<td></td>
<td>7</td>
</tr>
</tbody>
</table>
Place this in your cell:
<div style="border-bottom:solid 1px black">1a</div><div>1b</div>
http://jsfiddle.net/jDTTx/7/
Related
I've created a simple table using html and a bit of bootstrap, but the last rowspan doesn't work as I thought it will, here's code:
I wanted 4 red-marked cells to be one, so I've replaced first <td>group1</td> with <td rowspan="4">group1</td> and removed remaining 3 <td>group1</td> but it has messed up whole table.
Also it is placed it <div class="col-lg-7 mb-4"> div, but I've also tried without any div - the effect was the same. I'm not sure what is causing that problem, considering that the rest rowspans is working just fine.
/* I don't think CSS is needed, but just in case: */
table.table-bordered {
border: 1px solid #2f8dff!important;
box-shadow: 0px 0px 100px 0px #2f8dff;
margin-top: 20px;
text-transform: uppercase;
font-size: 12px;
color: white;
}
table.table-bordered>thead>tr>th {
border: 1px solid #2f8dff!important;
}
table.table-bordered>tbody>tr>td {
border: 1px solid #2f8dff!important;
}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">17:00-18:00</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">18:00-19:00</td>
<td>1</td>
<td rowspan="2">group3</td>
<td>3</td>
<td>4</td>
<td rowspan="2">group3</td>
</tr>
<tr>
<td rowspan="2">group2</td>
<td>8</td>
<td rowspan="2">group2</td>
</tr>
<tr>
<td rowspan="2">19:00-20:00</td>
<td rowspan="4">group1</td>
<td rowspan="2">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="3">group1</td>
<td rowspan="3">group1</td>
<td>group1</td>
</tr>
<tr>
<td rowspan="2">20:00-21:00</td>
<td>3</td>
<td>group1</td>
</tr>
<tr>
<td>7</td>
<td>group1</td>
</tr>
</tbody>
</table>
What shall I do?
Thanks in advance!
I don't really know what you mean by "messed up whole table". After adding the row-span="4" and removing the three following td tags, the table looked just fine for me:
The only thing I can see is the changing height of that table cell. This can be prevented by adding this CSS:
tr {
height: 1rem;
}
It makes every row equal height and produces following result:
I've been struggling for over an hour to create a HTML table. I can't understand why it doesn't work or how I should combine the rowspans, colspans. If you could help me, I would be more than grateful to you:
I tried the following, all failed, some broke my previous templates as well:
td {
border: 2px solid;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="5"></td>
<td rowspan="5"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Please, help me.
Try with the following:
table { border-collapse: collapse; }
td {
border: 2px solid black;
height: 100px;
width: 100px;
}
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="2">A</td>
<td>B</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>C</td>
</tr>
</table>
I'm not sure why you used rowspans of 5 and 3 but the way it works is
you specify a rowspan or colspan and that fills in the grid of cells
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
Means we have 5 columns and 5 rows (so far)
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X| | | | row 4
+-+-+-+-+-+
|X|X| | | | row 5
+-+-+-+-+-+
rows 2 and 3 need no cells (no <td>s) because they are already specified by the first row.
row 4 needs 3 <td> for the 3 unused cells
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
The grid is now full
+-+-+-+-+-+
|X|X|X|X|X| row 1
+-+-+-+-+-+
|X|X|X|X|X| row 2
+-+-+-+-+-+
|X|X|X|X|X| row 3
+-+-+-+-+-+
|X|X|X|X|X| row 4
+-+-+-+-+-+
|X|X|X|X|X| row 5
+-+-+-+-+-+
so row 5 needs no cells (no <td>s)
table { border-collapse: collapse; }
td {
border: 2px solid;
height: 100px;
width: 100px;
text-align: center;
}
<table>
<tr>
<td rowspan="5">a</td>
<td rowspan="5">b</td>
<td rowspan="3">c</td>
<td rowspan="3">d</td>
<td rowspan="3">e</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
<td rowspan="2">i</td>
</tr>
<tr></tr>
</table>
This should look very closely to what you want to achieve. Important parts are border-collapse, rowspan, width of td, width of border, using class. This is one of many ways to do it.
td {
border: 4px solid;
height: 100px;
width: 50px;
}
table {
border-collapse: collapse;
}
.larger-width{
width: 75px;
}
<table>
<tr>
<td rowspan='2' class="larger-width"></td>
<td rowspan='2' class="larger-width"></td>
<td></td>
<td></td>
<td></td>
<td class="larger-width"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
[![<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table example</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 5px solid black;
}
</style>
</head>
<body>
<table border="2" cellpadding="50px">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Output will be
1]1
Try this solution, do modifications as you wish.
<table width="346" height="200" border="1">
<tbody>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.
Here is a picture of what I have now
I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
Here is a fiddle that I have:
http://jsfiddle.net/9n3oyf2w/
<!-- This works: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="1">3</td>
<td colspan="5">4</td>
</tr>
<!-- This doesn't work: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="6">3+4</td>
</tr>
I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.
EDIT:
New pic for what I am trying to achieve:
link
So you want something like this?
table, th, td{
padding: 0;
margin: 0;
border-collapse: collapse;
border:0;
border-spacing:0;
margin-left: auto;
margin-right: auto;
}
table.topInnerTable, table.topInnerTable td{
border: 1px solid black;
border-bottom: 0;
}
table.bottomInnerTable, table.bottomInnerTable td{
border: 1px solid black;
}
<table width="960px">
<tr>
<td>
<table class="topInnerTable" width="100%">
<colgroup>
<col width="320px">
<col width="320px">
<col width="320px">
</colgroup>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="bottomInnerTable">
<tr>
<td width="80px">1</td>
<td width="80px">1</td>
<td width="800px">10</td>
</tr>
</table>
</td>
</tr>
</table>
I believe this is what you want
<table width="100%">
<tr>
<td colspan="3" width="33%">a</td>
<td width="33%">b</td>
<td width="33%">c</td>
</tr>
<tr>
<td width="10%">1</td>
<td width="10%">2</td>
<td colspan="3" width="80%">3+4</td>
</tr>
</table>
I wan to arrange columns in my thead to look like the below image
This my code
<thead>
<tr>
<td style="text-align: center;">SUBJECT</td>
<td style="text-align: center;" colspan="3">CA<br> T1 T2 T3</td>
<td style="text-align: center;">CA TOTAL (40)</td>
<td style="text-align: center;">SIGN</td>
</tr>
</thead>
But it displays like this, how can I split the 'CA' column
You need take 2 rows for thead for display.
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
</table>
</body>
</html>
You can't split a cell into more cells, you can only merge existing cells together. That said, if you want to have five columns you need to create five columns, and rather than using a <br> to force content to a new line in one cell, and then fake separate cells, use two rows of cells. This, of course, requires the appropriate use of the colspan and rowspan attributes, such as the following:
table {
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #000;
min-width: 4em;
min-height: 2em;
padding: 0.2em 0.5em;
}
th {
vertical-align: top;
}
<table>
<thead>
<tr>
<!-- rowspan="2" forces the following <th> element
to span two rows in its containing element: -->
<th rowspan="2">SUBJECT</th>
<th colspan="3">CA</th>
<!-- as it does here also: -->
<th rowspan="2">CA TOTAL (40)</th>
</tr>
<tr>
<!-- this <tr> contains only three <th> elements,
unlike the previous <tr> which contains five,
because two <th> elements of the previous row
will occupy space in this <tr> also -->
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
JS Fiddle demo.
Incidentally, where possible try to style your content via the use of stylesheets; this makes it far easier to update your style and presentation in future.
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
Use rowspan and 2 trs
th { vertical-align: top; border: 1px solid black;}
<table>
<thead>
<tr>
<th rowspan="2" style="text-align: center;">SUBJECT</th>
<th style="text-align: center;" colspan="3">CA</th>
<th rowspan="2" style="text-align: center;">CA TOTAL (40)</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
</table>
You can use this. Working perfectly:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: 1px solid #000;
}
</style>
<table>
<thead>
<tr>
<th rowspan="2" >SUBJECT</th>
<th colspan="3">CA</th>
<th rowspan="2">CA TOTAL (40)</th>
<th rowspan="2">SIGN</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<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>