I want to display image next to each row in a table using Html and CSS.
Something like this image:
Images will be placed at the red cross position: on right side of each row and not created within extra column.
What would be the best way to do that.
You could try using the :last-child combined with the :after pseudo.
tr td:last-child::after {
content: '';
display: inline-block;
position: absolute;
height: 1em;
width: 1em;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat center;
}
<table>
<thead>
<th>1</th>
<th>2</th>
</thead>
<tb>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tb>
</table>
Another column with a blank table header should do it.
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th> </th> -- This is the blank space
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>Image goes here</td>
</tr>
</table>
You can always style it up to appear like it is not apart of the table.
Related
I am using react-bootstrap. I have tables inside of <td></td> tags for the Status, Start Time and End Time column. Status column will always have a value. Start Time and End Time may or may not have a value. I need to ensure that the rows always stay aligned.
In this picture below, I want the grey boxes in Status, start Time and End Time to be aligned/same height.
<tr>
<td>{rowData.fileType}</td>
<td>{rowData.fileName}</td>
<td><table><tbody>{getStatusNames(rowData.statuses)}</tbody></table></td>
<td><table><tbody>{getStatusStartTimes(rowData.statuses)}</tbody></table></td>
<td><table><tbody>{getStatusEndTimes(rowData.statuses)}</tbody></table></td>
<td>deltatimes</td>
<td>{rowData.errorMessage}</td>
</tr>
I got a nice idea, you can utilize rows span for this. It's not answering the question in your title but it's solving your problem.
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
}
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
<th>The End</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue <br> color</td>
<td>Purple</td>
<th rowspan="4"> done </th>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate <br> chips</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th>
<th>Color <br></th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint <br> cake</td>
<td>Walnut</td>
</tr>
</table>
I have a table header that needs (I believe) to stay in a separate table due to positioning reasons. What is the best way to tell the table header to determine its column spacing based on the tbody contents below that rest inside a different <table>? Due to some constraints in the structure of what I am working on it would be difficult to move these into the same table, so that probably isn't an option, unfortunately.
For example, I have something like this:
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
The top table header is in a fixed position so the table and key will just scroll behind it as a user scrolls the table. I cannot figure out a way to get the TH to match the TDs below like they normally do when combined in the same table. Is there a trick I am unaware of to make them part of the same data set?
The simplest way is to ensure that both the tables has the same parent element. Then set the width of the th and first rows td tags to relative percentage,
so that since both the elements have the same parent, their widths will match also. Like shown below.
html,
body {
margin: 0px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
This was for the table td issue. Now the position fixed for the header can be implemented like so.
html,
body {
margin: 0px;
}
.fix {
position: fixed;
top: 0px;
}
.offset {
margin-top: 50px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div class="offset">
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.
Here is a simple example:
.centerText{
text-align:center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent.
I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.
Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.
Done, your class wasn't used anywhere
tr td:nth-child(2) {
text-align:center;
}
<table border="1">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I removed:
<col>
<col class="centerText">
and
.centerText{
text-align:center;
}
Because col doesn't mean anything and you didn't close the tags.
CSS
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center
}
If you want to align your all td content to the center
add the centerText class to your table
<table class="centerText" border="1">
It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:
td:nth-child(2) {
text-align:center;
}
In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.
td:nth-child(2) {
text-align: center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
Is it possible to nest a table inside of an existing table, but have the nested table be unrestricted by the parent table's column widths?
In other words, I want to fit a completely independent table inside a row of an existing table. The child table should not have to abide by the parent table's column widths.
Use the colspan attribute to make a cell span multiple columns. You can put the nested table in such a cell. Here's an example of a table of orders that contains order details as a nested table in the following row:
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 12px;
}
td, th {
text-align: left;
padding: 3px 5px;
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<th>Order #</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>100781</td>
<td>5/30/2015</td>
<td>$71.00</td>
</tr>
<tr>
<td colspan="3">
Order detail:
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mixed Greens Salad</td>
<td>$7.00</td>
<td>2</td>
<td>$14.00</td>
</tr>
<tr>
<td>Steak</td>
<td>$22.00</td>
<td>1</td>
<td>$22.00</td>
</tr>
<tr>
<td>Salmon</td>
<td>$19.00</td>
<td>1</td>
<td>$19.00</td>
</tr>
<tr>
<td>Chocolate Cake</td>
<td>$8.00</td>
<td>2</td>
<td>$16.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:
What's your preferred way of writing HTML tables that have vertical headers?
By vertical header I mean that the table has the header (<th>) tag on the left side (generally)
Header 1 data data data
Header 2 data data data
Header 3 data data data
They look like this, so far I've come up with two options
First Option
<table id="vertical-1">
<caption>First Way</caption>
<tr>
<th>Header 1</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
<tr>
<th>Header 2</th>
<td>data</td><td>data</td><td>data</td>
</tr>
</table>
The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.
Second Option
<style type="text/css">
#vertical-2 thead,#vertical-2 tbody{
display:inline-block;
}
</style>
<table id="vertical-2">
<caption>Second Way</caption>
<thead>
<tr>
<th colspan="3">Header 1</th>
</tr>
<tr>
<th colspan="3">Header 2</th>
</tr>
<tr>
<th colspan="3">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Footer</td>
</tr>
</tfoot>
</table>
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.
So, both ways render the table how it should, here a pitcure:
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?
First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.
Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.
With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.
The First Option... I think it is the better and simple approach..
Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
If you want to show a data-bound control element (like asp repeater) in your table, then first option won't be possible. Second option can be used as follows.
<asp:Repeater ID="hours" runat="server">
<HeaderTemplate>
<table id="vertical-table">
<thead>
<tr>
<th colspan="0">hours:</th>
</tr>
<tr>
<th colspan="1">Monday</th>
</tr>
<tr>
<th colspan="1">Tuesday</th>
</tr>
<tr>
<th colspan="1">Wednesday</th>
</tr>
<tr>
<th colspan="1">Thursday</th>
</tr>
<tr>
<th colspan="1">Friday</th>
</tr>
<tr>
<th colspan="1">Saturday</th>
</tr>
<tr>
<th colspan="1">Sunday</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
div.vertical {
margin-left: -85px;
position: absolute;
width: 215px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 220px;
line-height: 14px;
padding-bottom: 20px;
text-align: left;
}
<table>
<thead>
<tr>
<th class="vertical">
<div class="vertical">Really long and complex title 1</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 2</div>
</th>
<th class="vertical">
<div class="vertical">Really long and complex title 3</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>a, b, c</td>
<td>1, 2, 3</td>
</tr>
</tbody>
</table>