<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.
Related
I have a HTML table as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
When you run this you'll see the second row is collapsed, but I'd rather it was rendered uncollapsed, with the same height as the first row. One way of doing this is to put a entity, as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td> </td><!-- Empty row -->
</tr>
</table>
Is there a way I can achieve the second result, via CSS, using the HTML from the first snippet?
You can use this code:
td:empty::after{
content: "\00a0";
}
It adds escaped after every originally empty td, solving your issue.
td:empty::after{
content: "\00a0";
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>asd</td>
</tr>
<tr>
<td>dees</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
Learn more about escaping HTML entities here.
You can add height to table-cell, in this case it'll work like min-height property for other elements (with display: block, display: inline-block, etc). I added another table row with long text to demonstrate it:
td {
height: 22px;
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words</td>
</tr>
</table>
You can't use min-height property, because the specification says:
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
Try adding to your table CSS formatting like
table.someclass tbody td {
white-space:nowrap;
min-width:30px;
vertical-align:top;
}
This will make all empty cells equal and at least 30px wide.
Things like , nowrap and CSS content appending like content: "\00a0"; didn't work for me.
<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 have problem with texts in HTML
This is my code:
<table width="100%">
<tr>
<td align="left"><p style="font-family:arial;font-size:13px;color:white;">10000</p></td>
<td align="center"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
<td align="right"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
</tr>
</table>
I want it, when I add any character to first TD (align left) it move second and third TD (align center and align right)
Thank for every answer Have nice day :)
Set the width so they don't resize to fit whatever content is in the cells, e.g.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
http://www.w3schools.com/tags/att_td_width.asp
align=left/center/right just aligns the content of the cell.
the second and third cells move because the first becomes larger.
if you want fixed table, use width for the cells, so they dont change size.
I'm wondering if there is an "easy" way to gradient only one side of a table (i.e.: only the far left column) without doing each gradient individually to give the look of being continuous?
So in this code the dates should be colored and the color should start white and be a solid color at the bottom and all of the text should stay white
Please help, otherwise I'm in for a long night of headaches
<table>
<tr>
<td>1990</td>
<td>words and things</td>
<td>more words and things</td>
</tr>
<tr>
<td>2000</td>
<td>no color here</td>
<td>nor color here</td>
</tr>
<tr>
<td>2010</td>
<td>this should be white</td>
<td>and this too</td>
</tr>
<tr>
<td>2020</td>
<td>Oh the places you'll go</td>
<td>the magic that is CSS</td>
</tr>
<tr>
<td>2030</td>
<td>I am but a lowly peon</td>
<td>take pity upon my soul</td>
</tr>
</table>
You can make your cross-browser gradient styles here: http://www.colorzilla.com/gradient-editor/
And some styles here - replace the comments with the stuff the generator creates for you:
tbody tr td:first-child {
/* this will apply to the first cell in each row */
}
tbody tr td:first-child + td {
/* this will apply to the second cell in each row */
}
I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
Blue
</tr>
<tr>
White
</tr>
</table>
The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
Does THBODY have anything to do with it?
Thanks,
CSS Code
table { border-collapse:collapse; text-align:center; }
table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }
th { color: #fff;
background-color: #5c87b2; text-align:center; }
tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }
Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.
You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.
where, the CSS is
body {
background-color: black;
color: red;
}
table tr:nth-child(odd) {
background-color: blue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
The only problem you have is missing the tag in the table.
It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
here is the fiddle: http://jsfiddle.net/rBwBm/
I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.
The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue
<tr>
<th>Name</th>
</tr>
This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White
In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:
<thead>
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<!-- Table Content in Here -->
</tbody>
And I then changed the style sheet to be:
tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}
So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:
Does THead have anything to do with it?
Yes, it has EVERYTHING to do with it.