I am a student and am trying to create a table with a image centered within a cell. I also want to add text underneath the image centered within the same cell. Here is my html and css so far. Attached an image.
table { margin: auto;
width: 70%;
height: 500px;
border-collapse: separate;
border-spacing: 20px;
}
.tableImage { background-image: url(chick.png);
background-repeat: no-repeat;
background-position: center
}
caption { font-size: 1.5em;
}
td, th { border: 2px solid #3399cc;
padding: 5px;
}
td { text-align: center;
}
tr:nth-of-type(even) { background-color: #b3cce6;
}
tr:nth-of-type(odd) { background-color: #b3e6cc;
}
<table>
<caption>The Polish Chicken</caption>
<tr>
<th>text</th>
<th>text</ht>
<th>text</th>
<th>text</th>
</tr>
<tr>
<td>text</td>
<td colspan="2", rowspan="4", td class="tableImage">Silver Laced Polish Chicken</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
Here is a jsfiddle example:
https://jsfiddle.net/pwa6kg62/1/
<td colspan="2" rowspan="4" valign="bottom" class="tableImage">
I have used valign property of a table cell to align the text vertically.
I am sure you have your reasons, but it is highly recommended that one does not use table cells for layout. If you have any questions, please leave a comment below.
Give the .tableImage class a padding-top that is larger than your image.
For example:
.tableImage{ padding-top:200px;}
Here is a fiddle example: https://jsfiddle.net/0xjygxmt/1/
Minor side notes, I see are that you have the "t" and "h" transposed in your second closing </th> tag and no closing <table> tag, but those wouldn't affect the cell in question.
Related
P.S : Please don't mark as duplicate until you have read the entire question
I have a table where in I want to give fixed width to the columns as I want to display them dynamically. The width of the table is 100%. So in that table, only 1 column or 3 or 6, etc can be displayed. But the problem is if in a scenario I have only 1 column the data in that table occupies the entire 100% table even though i have given fixed width to the column. I want the column width to be fixed irrespective of the table width. Please guide where I am wrong. Below is the code I have been trying.
table {
table-layout: fixed;
word-break: break-all;
}
table td {
border: 1px solid;
overflow: hidden;
}
<table width="100%" cellspacing='0' cellpadding='0'>
<col width="100px" />
<col width="50px" />
<col width="50px" />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</table>
Add hidden column to the end of table.
Table will be 100% width and resize hidden column than you resize the page.
Code example:
table
{
table-layout: fixed;
word-break: break-all;
border-collapse: collapse;
width:100%;
}
td
{
height:50px;
border: 1px solid;
}
th
{
height:50px;
border: 1px solid;
}
.F
{
width:100%;
border:none;
border-left:1px solid;
}
<table>
<col width='200px' />
<col width='100px' />
<col width='50px' />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th class='F'></th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
<td class='F'></td>
</tr>
</table>
Here is the complete code.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
</body>
</html>
Here is a slightly different approach. In this example, it will take an auto width table and then fix the width and column widths. I've found this useful where I have an auto width table that I want to filter without the table resizing.
This example makes use of the col and th elements on a well formed table.
The use of the fixed class is added so that the table can be reset easily.
/*jQuery - mistajolly - fix table widths*/
var table = $(this);
if(!table.hasClass('fixed')){
table.width(table.outerWidth(true));
table.addClass('fixed');
var cols = table.find('col');
table.find('th').each(function(index){
$(cols[index]).width($(this).outerWidth(true)).addClass('fixed');
});
}
/* Reset and remove fixed widths */
if(table.hasClass('fixed')){
table.removeClass('fixed').css('width','');
table.find('.fixed').each(function(index){
$(this).removeClass('fixed').css('width','');
});
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I would like to create HTML table like this example.
How I can preserve the header gray and make the data to look like the same way?
Here is a working snippet.
border-spacing removes the spacing between cells
tr:first-of-type targets only the first row to apply background color
td:nth-child(odd) targets only the first column to make all fields bold
table{
border-spacing:0;
}
tr:first-of-type{
background:lightgray;
}
td:nth-child(odd){
font-weight:bold;
}
th,td{
padding:5px;
}
<table>
<tr>
<td>Plan / Feature</td>
<td>Standard</td>
</tr>
<tr>
<td>Plan Type</td>
<td>Annual</td>
</tr>
<tr>
<td>Email Support</td>
<td>Yes</td>
</tr>
</table>
Try this:
CSS:
table {
border-collapse: collapse;
}
table th, table thead tr {
background: #ccc;
font-weight: bold;
}
table tr td:first-child {
font-weight: bold;
}
table tr td {
background-color: transparent;
}
Example HTML:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</tbody>
</table>
JSFiddle
You can style the header of a table with css
<table>
<tr>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
th { background-color: #ff0000; }
Or see this fiddle: http://jsfiddle.net/h4817knp/6/
Edit: To avoid the gaps in the header add
table { border-collapse: collapse; }
to the css
http://jsfiddle.net/1yn99g13/1/
You just set the background colour on the elements you want it to appear on.
There's nothing complicated about this.
table, tbody, tr, th, td { background: transparent; }
thead { background: #aaa; }
You should, of course, use CSS:
You need to get rid of the default spacing in the table:
table {
border-collapse: collapse;
border-spacing: 0;
}
You need to set the background color of the table head element:
table thead {
background-color: lightgrey;
}
You need to define your cell sizes:
td {
width: 100px;
height: 25px;
}
Working Fiddle
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 100px;
height: 25px;
}
table thead {
background-color: lightgrey;
}
<table>
<thead>
<tr>
<td>HeaderA</td>
<td>HeaderB</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Value</td>
</tr>
</tbody>
</table>
Is it possible with css3 to apply borders on table, tr, td so it would look like it is drawn by hand similar to:
Currently, I'm trying like the following but which results in space between tds:
table{
border-collapse: collapse;
}
td{
background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
background-size: 100% 100%;
padding: 20px;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
So, is there a way so I can use different borders on top right bottom and left of the tds?
You could do that by carefully crafting a table with no borders or background (so it's transparent) and using your hand-drawn graphic as a background.
If you design the background to be repeating (seamless) your table could even be dynamic.
table {
background: url(http://i.stack.imgur.com/idN4k.jpg) -10px -15px repeat;
}
table td {
padding: 20px 10px;
}
<table>
<tr>
<td width="37">one</td>
<td width="42">two</td>
<td width="42">three</td>
<td width="42">four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
</table>
http://jsfiddle.net/nhur0uu0/
This could also be achieved with custom svg, but I would want to know more about what you are going for before I recommended it.
You might be able to achieve something like that with border-images and applying different border images to every Nth cell with the :nth-child selectors on both rows and columns, maybe with some prime numbers thrown in to obscure repetition.
This will require border-collapse:separate tables, so you'll also want zero border spacing.
The images will have to line up properly at the corners though, so the lines can't be quite as crooked as in your example
You could try setting negative margins as I did here.
table {
border-collapse: collapse;
}
td {
background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
background-size: 100% 100%;
padding: 20px;
margin: -9px -8px;
display: inline-block;
}
tr {
display: block;
}
tr:nth-child(2) {
margin-left:4px;
}
tr:nth-child(3) {
margin-left:8px;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
Not too pretty, but it works.
Is it possible to change apply css for the table cells under a table header that is selected? I don't care how th got selected I just want to use css only to apply something to those table cells where their table header is selected like italicized and underline.
<table>
<tr>
<th>col1</th>
<th class="selected">col2</th>
</tr>
<tr>
<td>cell1a</td>
<td>cell2b</td>
</tr>
<tr>
<td>cell1aa</td>
<td>cell2ba</td>
</tr>
</table>
css: (prototype...)
for the column position of the th row that is selected on this table
apply this css to the column position of all the td elements of this table
{
font-style:italic;
text-decoration: underline;
}
HERE is an article on how to color the whole row on mouse hover.
HERE is a post that gives an example how to style an element on click with css, by utilizing a checkbox
combining those two from above, i wrote you a simple example on how to achieve your goal: FIDDLE
basically you just put checkboxes in your th and use their checked state to color the entire column by inserting a huge styled background using ::after selector and hiding its overflow:
you can style the checkboxes as you see fit. put an image instead or make them disappear if you like.
HTML:
<table>
<tbody>
<tr>
<th></th>
<th><input type="checkbox">50kg</input></th>
<th><input type="checkbox">55kg</input></th>
<th><input type="checkbox">60kg</input></th>
<th><input type="checkbox">65kg</input></th>
<th><input type="checkbox">70kg</input></th>
</tr>
<tr>
<th>160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th>165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th>170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th>175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</tbody>
CSS:
input[type="checkbox"] {
margin: 0;
border: 0 none;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th {
cursor: pointer;
padding: 10px;
position: relative;
}
th input[type="checkbox"]:checked::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?
Any solutions are welcome.
This is happening because your thead is not inside the div.
I added some height to the div to show...
Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/
Add this
-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;
to
.geniusPicks table tr#picksHeading th
And it works.
Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/
So no need for the div
If you want to add shadow to thead without using div, try the following code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table thead{
display:block;
position:relative;
box-shadow: 0px 1px 3px 0px #cccccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table tr{
display:table;
table-layout:fixed;
width:100%;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred Trading</td>
<td>Alfred Thomas</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Australia</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helena Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus</td>
<td>John Cook</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>