I need to align td cell value to center, both horizontally and vertically. <td> has a rowspan attribute.
The output right now is like:
A | B | C | D
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Desired:
A | B | C | D
1 | 2 | 3 |
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Try :
<td style="vertical-align : middle;text-align:center;">
use <td rowspan="4" align="center">4</td> its work
table td {
padding: 5px;
}
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="4" align="center">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
live fiddle
Code
<table class="table table-bordered">
<thead>
<tr>
<td rowspan="2" style="vertical-align: middle;">
first
</td>
<td rowspan="2" style="vertical-align: middle;">
Second
</td>
<td rowspan="2" style="vertical-align: middle;">
Third
</td>
<td rowspan="1" colspan="2">
Fourth
</td>
</tr>
<tr>
<td>
fifth
</td>
<td>
sixth
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
You easily do it with css using CSS selectors and the vertical-align property.
Any td or th by default has a rowspan = 1.
To position the rowspan'd td text in the center, just do this:
Taking an example of rowspan = "3"
td[rowspan = "3"] {
vertical-align: middle;
}
If you want to make it generic, just use it as below:
th[rowspan]:not([rowspan="1"]) {
vertical-align : middle;
}
Try this:
<td rowspan="4" tyle="text-align:center;">4</td>
Just add rowspan 4.
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td rowspan="4">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<style>
#customers td, #customers th {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td rowspan ="4">Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
</tr>
</table>
</body>
</html>
The text is centered aligned by default. Please check existing css as it is overwrite the align property.
try:
<td align="center" valign="middle">
Add general class into your css.
.mytable td[rowspan] {
vertical-align: middle;
text-align: center;
}
Use the align attribute
<td align="center">Name</td>
Related
I'm trying to have a table according to value from another table so if I choose an item from table 1 it will create a new items row in table 2 and these items will be ordered and every item from the same category will be list under the title of this category.
this is a picture of how the result will be :
this is the sample code.
$("#table tr").click(function(){
var row=$('<tr><td><td></tr>>')
row.appendTo('#add')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Add item</h1>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="A">
<td id="1">A1</td>
<td id="2">1</td>
</tr>
<tr class="A">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
</table>
<div>
</div>
<div>
</div>
<br>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr>
<td>A1</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr>
<td>B2</td>
<td>3</td>
</tr>
<tr>
<td>B3</td>
<td>2</td>
</tr>
</table>
</body>
</html>
One way to achieve this would be to use data attributes on each row of the source and destination tables. This way you can determine the group the source row came from so that you can place it in the same group in the destination table.
Also note that I added a class, .copyable-row, to each tr which is allowed to be cloned to the second table. Your current logic allowed the table headers themselves to be copied.
let $dest = $('#add');
$("#table tr.copyable-row").click(e => {
let $tr = $(e.currentTarget);
let group = $tr.data('group');
let $target = $dest.find(`tr[data-group="${group}"]:last`);
$tr.clone().insertAfter($target);
});
table {
margin: 0 0 10px;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A1</td>
<td>1</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
</table>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr data-group="a">
<td colspan="2">Class A</td>
</tr>
<tr data-group="a">
<td>A1</td>
<td>4</td>
</tr>
<tr data-group="b">
<td colspan="2">Class B</td>
</tr>
<tr data-group="b">
<td>B2</td>
<td>3</td>
</tr>
<tr data-group="b">
<td>B3</td>
<td>2</td>
</tr>
</table>
I'm currently making a HTML table (it's a work in progress and still needs a lot more CSS to make it look pretty) and I can't seem to style the <THEAD> so it stretches across the entire table instead of only the left - as shown in the attached photo. I've tried multiple ways but none seem to work, I would be very grateful if anyone could help.
<head>
<title>League of Legends EU LCS Standings</title>
</head>
<body>
<TABLE WIDTH="50%" BORDER="5" CELLPADDING="4" CELLSPACING="3">
<THEAD>
<TR>
<TH COLSPAN="2">
<BR>
<H3>LoL EU LCS Table Standings</H3> </TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TH>Position</TH>
<TH>Team</TH>
<TH>Wins</TH>
<TH>Draws</TH>
<TH>Losses</TH>
<TH>Points</TH>
</TR>
<TR ALIGN="CENTER">
<TD>1</TD>
<TD><A HREF=“http://www.fnatic.com”>Fnatic</A></TD>
<TD>5</TD>
<TD>2</TD>
<TD>1</TD>
<TD>17</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>2</TD>
<TD><A HREF=“http://www.g2esports.com”>G2 ESports</A></TD>
<TD>4</TD>
<TD>4</TD>
<TD>0</TD>
<TD>16</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>3</TD>
<TD><A HREF=“http://www.h2k-gaming.eu”>H2K</A></TD>
<TD>3</TD>
<TD>4</TD>
<TD>1</TD>
<TD>13</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>4</TD>
<TD><A HREF=“http://www.schalke04.de/en/”>FC Schalke 04</A></TD>
<TD>3</TD>
<TD>3</TD>
<TD>2</TD>
<TD>12</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>5</TD>
<TD><A HREF=“https://www.splyce.gg”>Splyce</A></TD>
<TD>2</TD>
<TD>4</TD>
<TD>2</TD>
<TD>10</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>6</TD>
<TD><A HREF=“http://www.team-vitality.fr”>Team Vitality</A></TD>
<TD>1</TD>
<TD>5</TD>
<TD>2</TD>
<TD>8</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>7</TD>
<TD><A HREF=”http://www.giantsgaming.pro/en/home”>Giants</A></TD>
<TD>2</TD>
<TD>1</TD>
<TD>5</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>7</TD>
<TD><A HREF=“http://www.unicornsoflove.eu”>Unicorns of Love</A></TD>
<TD>2</TD>
<TD>1</TD>
<TD>5</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>9</TD>
<TD><A HREF=“http://www.roccat.org/en-GB/Home/Overview/”>Roccat</A></TD>
<TD>1</TD>
<TD>4</TD>
<TD>3</TD>
<TD>7</TD>
</TR>
</TR>
<TR ALIGN="CENTER">
<TD>9</TD>
<TD><A HREF=“https://www.origen.gg”>Origen</A></TD>
<TD>1</TD>
<TD>4</TD>
<TD>3</TD>
<TD>7</TD>
</TR>
</TBODY>
</TABLE>
<style>
td, th {
border: 1px solid #999;
padding: 0.3em;
}
th {
background-color:#808080;
color: white;
}
th, tr {
font-size: 24px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
tr:hover {background-color: #f5f5f5}
table{
border: 1px solid black;
width: 100%;
}
</style>
</body>
</html>
Change:
<TH COLSPAN="2">
to :
<TH COLSPAN="6">
You told the table head row to only span two columns when you want it to span all six.
Note: as danfromgermany noted, be sure to fix your quotes to use ", not “. Also note that <th> elements can't contain <h3> elements. You should run your code through a HTML validator to catch such errors.
This isn't something you can fix with styling.
To make a table heading cell span multiple columns, you have to set the colspan attribute to be equal to the total number of columns. You have more than 2 columns, so 2 won't do the job.
You don't have table heading cell data though. The th element is for putting a heading on a column (or set of columns), not a whole table.
That is what caption is for.
td,
th,
caption {
border: 1px solid black;
padding: .3em font-weight: bold;
font-size: 125%;
}
caption {
background-color: gray;
color: #fff
}
th,
tr {
font-size: 24px;
font-family: Futura, 'Trebuchet MS', Arial, sans-serif
}
tr:hover {
background-color: #f5f5f5
}
table {
border: 1px solid #000;
width: 100%
}
<table width="50%" border="5" cellpadding="4" cellspacing="3">
<caption>LoL EU LCS Table Standings</caption>
<tbody>
<tr>
<th>
Position
</th>
<th>
Team
</th>
<th>
Wins
</th>
<th>
Draws
</th>
<th>
Losses
</th>
<th>
Points
</th>
</tr>
<tr align="center">
<td>
1
</td>
<td>
Fnatic
</td>
<td>
5
</td>
<td>
2
</td>
<td>
1
</td>
<td>
17
</td>
</tr>
<tr align="center">
<td>
2
</td>
<td>
G2 ESports
</td>
<td>
4
</td>
<td>
4
</td>
<td>
0
</td>
<td>
16
</td>
</tr>
<tr align="center">
<td>
3
</td>
<td>
H2K
</td>
<td>
3
</td>
<td>
4
</td>
<td>
1
</td>
<td>
13
</td>
</tr>
<tr align="center">
<td>
4
</td>
<td>
FC Schalke 04
</td>
<td>
3
</td>
<td>
3
</td>
<td>
2
</td>
<td>
12
</td>
</tr>
<tr align="center">
<td>
5
</td>
<td>
Splyce
</td>
<td>
2
</td>
<td>
4
</td>
<td>
2
</td>
<td>
10
</td>
</tr>
<tr align="center">
<td>
6
</td>
<td>
Team Vitality
</td>
<td>
1
</td>
<td>
5
</td>
<td>
2
</td>
<td>
8
</td>
</tr>
<tr align="center">
<td>
7
</td>
<td>
Giants
</td>
<td>
2
</td>
<td>
1
</td>
<td>
5
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
7
</td>
<td>
Unicorns of Love
</td>
<td>
2
</td>
<td>
1
</td>
<td>
5
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
9
</td>
<td>
Roccat
</td>
<td>
1
</td>
<td>
4
</td>
<td>
3
</td>
<td>
7
</td>
</tr>
<tr align="center">
<td>
9
</td>
<td>
Origen
</td>
<td>
1
</td>
<td>
4
</td>
<td>
3
</td>
<td>
7
</td>
</tr>
</tbody>
</table>
</body>
</html>
I want to create a table like
col1 | col2 | col3
** ** **
col4
****************
How should I write the html table tag?
Thank you so much
Best Way - add a column Span to the merged.
<table>
<tr>
<th>*</th>
<th>*</th>
<th>*</th>
</tr>
<tr>
<td colspan="3">***</td>
</tr>
</table>
JSFIDDLE: http://jsfiddle.net/Lde2fwe7/
Do it like this :
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3">*********</td>
</tr>
</table>
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3"> your text*</td>
</tr>
</table>
JSFiddle
use colspan can achieve it.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">head</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/
Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>
Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>
Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>
<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...
Can a table look like this be made?
+---------------+
| | | | |
+---------------+
| | | |
+---------------+
| | | | |
+---------------+
If I do
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><td>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</td></tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
then abc is inserted in just one <td>.
This jdfiddle shows the problem
http://jsfiddle.net/littlesandra88/EskrV/
How is such a table made, if it is possible?
Add a colspan to the <td> with the 3 column table.
Updated fiddle: http://jsfiddle.net/EskrV/18/
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr><td colspan="4">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</td></tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
You could do
<table>
<tr>
<td colspan=3>1</td>
<td colspan=3>2</td>
<td colspan=3>3</td>
<td colspan=3>4</td>
</tr>
<tr>
<td colspan=4>a</td>
<td colspan=4>b</td>
<td colspan=4>c</td>
<tr>
<td colspan=3>1</td>
<td colspan=3>2</td>
<td colspan=3>3</td>
<td colspan=3>4</td>
</tr>
</table>
Of course you can: http://jsfiddle.net/XqKRR/ (without nested tables)
However I've got that strage feeling that you're trying to use tables for something that is not a tabular data, am I right? If so, maybe a CSS and display: table[-row|-cell] will be a better soultion?
You could use nested <div>s then use css to set the width of each div.