<tr>
<td></td>
<td colspan="3">Susi Handayani Jl. Kebangsaan No.225 300.000</td>
</tr>
How to merge the two td to be inside one Td, but it's not sticking together, merged but I want the word to not stick together beside, make some space from the deleted td to be the same column as above
I tried align but it didn't Work, I've also tried dividing the tr and tried removing td for one paragraph and it still sticks with the second paragraph (td), what I'd expect is the td not to stick together but to align the text above the text that I've made
<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Peserta</th>
<th>Alamat</th>
<th>Simpanan</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>350.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Andi Suryono</td>
<td>Jl. Kemerdekaan No.17</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td colspan="3">Susi Handayani
Jl. Kebangsaan No.225
300.000</td>
</tr>
<tr>
<td>3.</td>
<td>Roy Pratama</td>
<td>Jl. Merdeka No.32</td>
<td>1.000.000</td>
</tr>
</tr>
<tr>
<td>4.</td>
<td>Tia Suryani</td>
<td>Jl. Jelajah No.111</td>
<td>1.555.000</td>
</tr>
</tbody>
</table>
I'm trying to make the table fused but not sticking together, I'm planning to give the word some space and how do I make the space for each column
You're talking about styling, yet you posted no style tag or CSS whatsoever. Post the general CSS you have, to reproduce the problem, or at least a screenshot of what the problem is.
Generally, spacing in tables comes with padding. Try something like:
<style>
td {
padding: 5px 10px;
}
</style>
This will put 5px top and bottom and 10px from both sides of every cell in the table.
<table>
<colgroup>
<col>
<col style='text-align:right'>
</colgroup>
<tbody>
<tr>
<td>Sample text</td>
<td>This text should be right-aligned</td>
</tr>
<tr>
<td></td>
<td>
<div id='spacer' style='width:100px'>
I'm a spacer
</div>
</td>
</tr>
</tbody>
</table>
Results in text that isn't right aligned. If the same style is applied to the td element it works fine. How do I right-align text in a column without having to apply a style to every td element?
Add the following CSS:
table.tableClass tr td:nth-child(2) {
text-align: right;
}
the number after nth-child( is the column, so for this case it would be 2 because it's the second column. Fiddle: http://jsfiddle.net/p97vdo2p/1/
HTML isn't rendered by column, it's rendered by rows. That's why there <tr></tr> (table rows) exist, but <tc></tc> (table columns) do not. That being said, the easiest way to style a column in HTML, is by applying the same CSS class to every <td></td> in the given column. You can type in the same class to every one manually, or you could write it programmatically, via javascript or a server-side script.
I want to align the first row of a table with a line of text. For example, I want to achieve
** some text ** |first row of table |
|second row of table|
...
When I use the <table> element it always puts the table on a new line, giving me
** some text **
|first row of table |
|second row of table|
...
which I do not want.
I only know basic HTML, but not CSS. Still, any solution involving CSS is fine, I just want a quickfix.
or you can also use rowspan inside table
<table border="1">
<tr>
<td rowspan="2" valign="top">some text</td>
<td>first row of table</td>
</tr>
<tr>
<td>second row of table</td>
</tr>
</table>
You could wrap the text in a span then do, e.g.:
span, table {
float:left;
}
<span>some text</span>
<table>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</table>
You can use display: inline-table to make table an inline element and align the table with the row.
e.g.
table {
display: inline-table;
}
I have an html table that autosizes. The table has an extra row at the bottom with its elements containing the contentEditable="true" attribute.
When none of the cells in the row of contentEditable="true" cells have any value, the row has almost no height. Conversely, if any cell in the row of contentEditable="true" cells has any value, then all of the cells in that row display with the height of the rows above it.
Here's the fiddle that shows my issue. http://jsfiddle.net/bjsfiddle/4mVgg/
The first table below has a "." character in the first cell that has the contentEditable="true" set. This row displays properly:
<h4>Table where last line can be edited</h4>
<h5>(the contenteditable row has a "." in the name field</h5>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
</tr>
<tr>
<td>Billy Byte</td>
<td>999 MyStreet</td>
<td>555 777 8558</td>
</tr>
<tfoot>
<td contenteditable="true"><div>.</div></td>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
</tfoot>
</table>
The second table below does not have the "." character in any contentEditable field, and the height
of that table row is extremely small. See below:
<h4>Same Table, no "." in the Name field</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
</tr>
<tr>
<td>Billy Byte</td>
<td>999 MyStreet</td>
<td>555 777 8558</td>
</tr>
<tfoot>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
<td contenteditable="true"><div></div></td>
</tfoot>
</table>
I'm sure it's probably something simple, but I just can't seem to find the answer.
Thanks much for any help
you can do a min-height, that way if it's empty, it will at least show the min height.
Use 20px or however many pixels you want!
so if you have CSS file, you can just throw this in there
td {
min-height: 20px;
}
if no CSS file, just add style tags in between the head tags in your html like this
<style type="text/css">
td { min-height: 20px; }
</style>
There are two tables with width 600px and 5 Columns each. But, width has not been set for each column. Here, I want to make columns width must be same in both the tables. You can use CSS or jQuery. And, I dont want to fix the column width manually.
HTML Example:
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</table>
<table width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</table>
Any help would be highly appreciated.
If you want all columns are in the same width, and since you're sure that you'll have exactly five columns in each table, I would suggest:
<table style="table-layout:fixed">
<col style="width:20%" span="5" />
<tr><!--stuffs...--></tr>
</table>
I know this question is a year old, but there is a way to do what you're asking!
Inside the table tag, you can use thead and tbody tags to group rows. You can also have multiple tbody tags, which allows you to keep the width the same (as they will be the same table), but style differently as required (or in my case, show and hide).
Example HTML can be found in this answer, copied for retnension https://stackoverflow.com/a/3076790/89211
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
I ran into this same issue and I found a kind of unclean, but working method.
Using JavaScript, you can momentarily combine both tables to get the desired auto-adjusted column widths and apply these widths to the elements in the two tables. After applying the widths to both tables in rows that aren't going to be removed, you can remove the rows you added to the combination table.
It's easiest if both tables are selectable individually (I just added ids) and if you can group the rows that you add to one table (I used tbody tags) so you can easily remove what you've added.
Hope this helps someone even though it's eight years late for the original post!
//add table 2 to table 1
$("#table1").append($("#table2 tbody").clone(true));
let table1_elems = $("#table1 tr:first td");
let table2_elems = $("#table2 tr:first td");
$(table1_elems).each(function(i) {
//get the column width from the combined table and apply to both tables
//(first one seems redundant, but is necessary once rows are removed)
$(this).width($(this).width());
$(table2_elems[i]).width($(this).width());
});
//remove the added rows
$("#table1 tbody:last").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</table>
<table id="table2" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</tbody>
</table>
You are looking for table-layout:fixed
see example:
http://jsfiddle.net/RsAhk/
Table cell width is dependent on its content if the width is not given via style.
By default, most browsers use an automatic table layout algorithm. The
widths of the table and its cells are adjusted to fit the content.
If you want to have an exact width to table cells of different tables then first understand the following description.
Table and column widths are set by the widths of the table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths. Under the "fixed" layout
method, the entire table can be rendered once the first table row has
been downloaded and analyzed. This can speed up rendering time over
the "automatic" layout method, but subsequent cell content might not
fit in the column widths provided. Cells use the overflow property to
determine whether to clip any overflowing content, but only if the
table has a known width; otherwise, they won't overflow the cells.
CSS
table{
table-layout:fixed; /* same width will be applied to both the tables*/
}
table td {
width:20%; /*20% width for 5 td elements*/
}
for more information https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
If you know that each table will have exactly 5 columns, applying width: 20% is your best bet:
td {
width: 20%;
}
But if you can have any number of columns, you can instead write a simple JQuery script to figure out how many columns there are and set the widths accordingly.
Here is a JSFiddle demo. I modified the HTML to add id="first" to the first table, so I could get a concrete reference to it. Then the JavaScript is this:
var num = $("table#first tr:first-child > td").length;
var width = (100 / num) + "%";
$("td").css("width", width);
Basically it grabs the first row of the #first table and counts the number of columns. Then it finds the corresponding percentage width for that number of columns. Then it applies that width to all <td> elements.
This will work as long as there are no colspan defined on the tds, which would throw off the column count. The columns will be equal since you've defined an explicit width on both tables.
We can move all the second table rows to the first table. Then set table cell width style to fix column width. After do this, we can move back the rows to the seconds table.
And if the table has images or fonts, you should do the work after they loaded.
/**
* Align two table column width
* #param {HTMLTableElement} table1
* #param {HTMLTableElement} table2
*/
function fixTableCellWidth (table1, table2) {
// container means `thead` or `tbody`
const sourceContainers = Array.from(table2.children);
const sourceTrs = sourceContainers.map(container => Array.from(container.children));
// move second table rows to first table
sourceTrs.forEach(trs => {
trs.forEach(tr => {
table1.lastElementChild.appendChild(tr);
});
});
// fix table cell width
Array.from(table1.children).forEach(container => {
Array.from(container.children).forEach(tr => {
Array.from(tr.children).forEach(td => {
if (td.style.width) return;
const rect = td.getClientRects()[0];
td.style.width = `${rect.width}px`;
});
});
});
// move back the second table rows
sourceTrs.forEach((trs, index) => {
const container = sourceContainers[index];
trs.forEach(tr => {
container.appendChild(tr);
});
});
}
// Call `fixTableCellWidth` after ready
document.addEventListener('DOMContentLoaded', () => {
fixTableCellWidth(document.getElementById('table1'), document.getElementById('table2'));
});
* {
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
table td {
border: 1px solid;
}
First Table:
<table id="table1" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>hdng 1</td>
<td>hdng 2</td>
<td>hdng 3</td>
<td>hdng 4</td>
<td>hdng 5</td>
</tr>
</tbody>
</table>
Second Table:
<table id="table2" width="600" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>content content content</td>
<td>con</td>
<td>content content content</td>
<td>content content content</td>
<td>content content content</td>
</tr>
</tbody>
</table>
Define any css class and format the it and then use that class on both the tables e-g
your temp.css
.anyClass tr td{
width: 150p;
etc...
}
and in HTML file
<table id="table1" class="anyClass">
......
......
</table>
<table id="table2" class="anyClass">
......
......
</table>
I created this in jQuery for my div tables where I have two tables and table-cells are labels and form fields.
jQuery:
$(".table").last().children().find("label").css("table", $(".table").first().children().find("label").css("width"));
CSS:
.table {display:table;}
.table div {display: table-row;}
.table .formTitle {text-align: center;display: table-caption;}
.table select,
.table input,
.table label {display: table-cell;}
HTML:
<div class="table">
<div class="formTitle"><span id="txtBI"></span></div>
<div class="visTog"><label></label><input type="text" id="EntName"></div>
<div class="visTog opac"><label></label><select id="EntYear"></select></div>
<div class="visTog opac"><label></label><select id="EntMonth"></select></div>
<div class="visTog opac"><label></label><select id="EntDay"></select></div>
</div>
<div class="table">
<div class="visTog locrdsC formTitle"><span id="txtCalVal"></span></div>
<div class="visTog locrdsC"><label></label><input type="text" name="gmt" id="EntposGMT" class="locrds"></div>
<div class="visTog locrdsC"><label></label><input type="text" name="EntJday" id="EntJday" class="locrds"></div>
</div>
</div>
This has a catch though. Could write a script to measure which one is bigger but in my case that isn't necessary.
I tend to make forms more interactive to improve usability; hence the visibility toggle and opacity classes, but are of no consequence to the cell width function.
You can sync the column widths by combining the tables with a tbody for each (as suggested by #Relequestual), and using <th scope="rowgroup"> for the headers:
table {
border-collapse: collapse;
}
table thead,
table tbody {
border-bottom: solid;
}
table tbody th {
text-align: left;
}
<table>
<thead>
<tr> <th> ID <th> Measurement <th> Average <th> Maximum
<tbody>
<tr> <td> <th scope=rowgroup> Cats <td> <td>
<tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4
<tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1
<tbody>
<tr> <td> <th scope=rowgroup> English speakers <td> <td>
<tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4
<tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1
</table>
Source: Example in the HTML spec itself