I have been tasked with switching out the TD elements for TH's on all the headers without any change in appearance. Currently the only styling on the TD is:
td.detailColHeader {
background-color:#d5d5d5;
color:#000;
font-weight:bold;
}
When I apply that to the th, it doesn't look the same. Anyone know what needs to be added to make the TH look like the TD?
The TH and TD elements are used for table cells. TH is used for table
header cells while TD is used for table data cells. This distinction
gives user agents a means to render such cells distinctly, for
instance by using a larger or heavier font for header cells. It is
also needed when rendering to speech. The CLASS attribute can be used
to further differentiate cells, for instance into heads and subheads.
This can be used together with style sheets to control the cell border
style, and fill color etc.
Practically the only change you have to do is:
td {
font-weight: bold;
}
td {
font-weight: bold;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
After #Alohci you can also add:
th {
text-align: left;
}
when table has fixed width.
td {
font-weight: bold;
}
table{
width: 200px;
}
th{
text-align: left;
}
<table>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</table>
Related
Every time I have a unicode symbol in one table cell,
vertical-align: middle;
in my CSS stops working. As a result, the text "floats higher" than middle.
Notice how text in the upper row is vertically aligned in the middle, whereas Sun Jun 4 23:52:31 2017 in the lower row floats higher than middle because of the folder unicode symbol.
Relevant part of CSS
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
vertical-align: bottom;
}
Relevant part of HTML
<td>📂 viz_coreOpt_3D<span style="float:right;">  Sun Jun 4 23:52:31 2017</span></td>
The folder icon is the reason that one line in height exceeds the other. I suggest to set the line height not less than the height of the icon.
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
line-height: 1.5em;
vertical-align: bottom;
}
<table>
<tr>
<td>
📂 viz_coreOpt_3D
<span style="float:right;">  Sun Jun 4 23:52:31 2017</span>
</td>
</tr>
</table>
Are you using the tag? You should be as you need to let the table know how to separate your rows.
your table setup in html should look something like this:
<table>
<thead> <!-- this is optional -->
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> <!-- once again this is optional -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
this will give you a table with two rows. One a header row and one a normal row. if you want them to be aligned within the boxes you can center the text with text-align: center; to the middle of the cell width wise and then use vertical-align: middle; to make it align vertically within the cell of the table.
what is causing the problem with your initial solution is the use of float. This will move it to the right and the top of the element because float
I am trying to create the following html table:
I can't work out why my current implementation is not yielding my desired result. As you can see in the snippet, the last <td> in the second <tr> spans 2 cols, and not the middle <td>.
table{
width: 100%;
}
table tr td {
background-color: #ddd;
}
table tr td[colspan="2"]{
background-color: #0a0;
}
table tr td[colspan="4"]{
font-size: 16px;
text-align:center;
background-color: #8C0000;
color: #fff;
}
<table>
<tbody>
<tr>
<td colspan="4"><b>Full width column</b></td>
</tr>
<tr>
<td>Column 1</td>
<td colspan="2">Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
In researching I found the following from: https://www.w3.org/TR/WD-html40-970917/struct/tables.html
There are several ways to determine the number of columns:
Count the number of columns as specified by COL and COLGROUP elements which can only occur at the start of the table (after the
optional CAPTION).
Scan each row in turn to compute the number of columns needed for each row, taking into account cells that span multiple rows and/or
columns. Set the number of columns for the table to be the maximum
number of columns from each row. For any row that has less than this
number of columns, the end of that row should be padded with empty
cells. The "end" of a row depends on the directionality of the table.
[deprecated] Use the cols attribute on the TABLE element. This is the weakest method since it doesn't provide any additional information about
column widths. This may not matter, however, if the author uses style
sheets to specify widths.
So what have I misunderstood about this functionality?
Please also note, that I am aware that I can use css to specifically set the widths of the <td>'s I want to know why my current implementation is not working.
In fact the second td does span two columns, but the width of columns in a simple HTML table depends on the contents of the table cells. If you add the following style attributes containing widths to the tds, their widths are distributed as desired (i.e. 25/50/25%):
(Note: You could/should also apply CSS classes to those tds and create external CSS rules for those classes)
table{
width: 100%;
}
table tr td[colspan="4"]{
font-size: 16px;
text-align:center;
background-color: #008CD1;
color: #fff;
}
<table>
<tbody>
<tr>
<td colspan="4"><b>Nonverbal skills</b></td>
</tr>
<tr>
<td style="width: 25%; background-color: #888;">energised</td>
<td colspan="2" style="width: 50%; background-color: green;">Gestures</td>
<td style="width: 25%; background-color: #888;">Under energised</td>
</tr>
</tbody>
</table>
table.table td:nth-child(1) {text-align: center; font-weight: bold; width: 70px;}
I would like to create a table header row that includes a title on the left as well as "Sample header" on the right. For accessibility and to be semantically correct, the title should probably be in a <caption> tag, but "Sample header" isn't part of the title so it probably shouldn't be inside of <caption>. The caption can't be inside the row since it has to be the first element after <table>.
Here is the HTML structure:
<table>
<caption>Caption</caption>
<thead>
<tr class="sample">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
The caption ends up as a separate line above the table, while I would like it to be on the same line as "Sample header".
Here is a sample of what I'm trying to achieve: http://jsfiddle.net/vueLL5ce/5/. It sets 'caption`'s position to relative and manually moves it where I want. The two main problems with this approach is that repositioning the caption still leaves its original space above the table and I'm working with pixels which vary between browsers so it won't necessarily line up correctly.
Is there a good way of achieving this? Am I stuck with including the header info inside of <caption> (and styling to look like a table row) or creating a regular table row and not using <caption>?
Move background color from div to table and it should remove the color from the top for you. see attached fiddle here
table {
border: solid 1px Black;
width: 100%;
background-color: #FFFFDD;
}
I would remove the caption, use the column head and separate the two items with there own class then align them in your css. Updated the example here This way you don't have the spacing issue at all.
I think I found a cross-browser solution. The key is to set line-height: 0 (plain 0 doesn't work in IE6, but I don't need to support it). Firefox also wouldn't let me reposition the caption directly, so I had to add another span. I still don't like dealing with pixels directly, so any suggestions on that end would be great.
Fiddle: http://jsfiddle.net/vueLL5ce/8/
HTML:
<div>
<table>
<caption><span>Caption</span></caption>
<thead>
<tr class="captionRow">
<th colspan="2">Sample header</th>
</tr>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
background-color: #FFFFDD;
}
table {
border: solid 1px Black;
width: 100%;
}
table caption {
line-height: 0;
text-align: left;
}
table caption span {
position: relative;
left: 4px;
top: 14px;
}
table th {
background-color: #CCC;
}
.captionRow th {
text-align: right;
}
I have a table nested inside another table. I want to give the outer table cells a border but not the inner table cells. All proper css and html comments aside, how can I style the outer cells but not the inner cells?
css
#table1 td
{
border: solid 1px black;
padding: 5px;
}
html
<table id="table1">
<tr>
<td>Outer table</td>
<td><table>
<tr>
<td>Inner table</td>
<td></td>
</tr>
</table></td>
</tr>
</table>
http://jsfiddle.net/kbVH2/
EDIT
This is the desired effect, #table2 http://jsfiddle.net/kbVH2/4/
I could do the following, but I was trying to keep it all in the css.
<table id="table2" border="1">
<tr>
<td>Outer table</td>
<td><table>
<tr>
<td>Inner table</td>
<td></td>
</tr>
</table></td>
</tr>
</table>
This is how I would do it:
#table1 td {
border: solid 1px black;
}
#table1 table td {
border: none;
}
Live demo: http://jsfiddle.net/kbVH2/3/
You might try using the child selector (>) like this:
#table1 > tbody > tr > td
jsFiddle Demo
Please note that in the demo I also added the tbody element. Some browsers will add it automatically if you omit it (like my Chrome), others might not, so for consistency, I normally add it to make sure it is not breaking my selectors.
I would not say this is your best choice in every situation, but a possible alternative.
Note: Internet Explorer 6 does not support the child selector. See Quirksmode CSS 2.1 Selectors Compatibility Table.
#table1 td
{
border: solid 1px black;
padding: 5px;
}
#table1 td table td
{
/*NORMAL INSIDE TABLE CSS HERE*/
}
put what ever you want the inside table to do inside the second selector. The inside table automatically inherits the outer ones css, but you can override it
Did you try giving them different class IDs and drive the CSS from those classes?
#table1 tr td{
//The table 1 css
}
#table1 tr td table tr td
{
//The second table
}
This should be exact to the second table!
I'm trying to style some specific parts of a 5x4 table that I create. It should be like this:
Every even numbered row and every odd numbered row should get a different color.
Text in the second, third, and fourth columns should be centered.
I have this table:
<table>
<caption>Some caption</caption>
<colgroup>
<col>
<col class="value">
<col class="value">
<col class="value">
</colgroup>
<thead>
<tr>
<th id="year">Year</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
</tr>
</thead>
<tbody>
<tr class="oddLine">
<td>Berlin</td>
<td>3,3</td>
<td>1,9</td>
<td>2,3</td>
</tr>
<tr class="evenLine">
<td>Hamburg</td>
<td>1,5</td>
<td>1,3</td>
<td>2,0</td>
</tr>
<tr class="oddLine">
<td>München</td>
<td>0,6</td>
<td>1,1</td>
<td>1,0</td>
</tr>
<tr class="evenLine">
<td>Frankfurt</td>
<td>1,3</td>
<td>1,6</td>
<td>1,9</td>
</tr>
</tbody>
<tfoot>
<tr class="oddLine">
<td>Total</td>
<td>6,7</td>
<td>5,9</td>
<td>7,2</td>
</tr>
</tfoot>
</table>
And I have this CSS file:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 0px 5px;
}
#year {
text-align: left;
}
.oddLine {
background-color: #DDDDDD;
}
.evenLine {
background-color: #BBBBBB;
}
.value {
text-align: center;
}
And this doesn't work. The text in the columns are not centered. What is the problem here? And is there a way to solve it (other than changing the class of all the cells that I want centered)?
P.S.: I think there's some interference with .evenLine and .oddLine classes. Because when I put "background: black" in the class "value", it changes the background color of the columns in the first row. The thing is, if I delete those two classes, text-align still doesn't work, but background attribute works perfectly. Argh...
Use CSS pseudo classes.
tr:nth-child(even){
background: #EEEEEE;
}
tr:nth-child(odd) {
background: #FFFFFF;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
text-align: center;
}
I actually found out about the even and odd options for this like a couple hours ago. Hope you'll be as happy to use them as I was :D
Edit: Fixed the last line from tr to td and here's a fiddle
To answer why your code isn't working, W3schools has the answer.
"Note: Firefox, Chrome, and Safari only support the span and width attributes of the colgroup element.
Add the style attribute to the tag, and let CSS take care of backgrounds, width and borders. These are the ONLY CSS properties that work with the tag."
So text-align has no effect. Colgroup is just too old. You gotta get with the times man :P