I am trying to create a table with text and images with html and css. I want to give a color to the whole table and show image over that back ground color
HTML
<table>
<tr>
<td class="timg">
<img src="s.jpg" />
</td>
<td>
<p><h3>This is some text </h3> all the bbbbbbbbbbbbbbbbb</p>
</td>
</tr>
<tr>
<td class="timg"><img src="p.jpg" /> </td>
<td> <p> This is some text</p> </td>
</tr>
</table>
CSS
.timg{
height: 100px;
width: 150px;
}
.timg img {
height: 100px;
width:150px;
}
jsFiddle
Related
I am trying to make a web-page where I have a table of information and an image side-by-side as in the example below
Example:
bar fOo
Instead of:
bar
fOo
I have placed the image within a div and the information table in another div element, and I have been playing with the CSS properties to try to get them to be side-by-side, however they refuse to work as expected.
The CSS is below, #book is the image itself, while book_information is the information inside the table.
#book
{
float: right;
flex: 33.33%;
padding: 5px;
margin-left: 0;
width: 50%;
}
#book_information
{
width: 50%;
float: left;
padding-right: 0;
margin-right: 0;
}
table
{
border-collapse: collapse;
float:top;
border: 1px solid black;
table-layout: fixed;
width: 50%;
}
What should I use to allow this to work as expected? and what improvements could work I work on to get it responsive?
Below is the html structure of the page at the moment that I am using along with this:
<main>
<div>
<div class= "left" id="book"><img src="Book.jpg" alt="></div>
<div class="left" id="book_information">
<table id="information">
<tr>
<td class="1">Price:</td>
<td class="1">€18.90</td>
</tr>
<tr>
<td>Author</td>
<td></td>
</tr>
<tr>
<td class="1">About</td>
<td class="1"><p></p></td>
</tr>
<tr>
<td>Where to get it:</td>
<td>Amazon ,
Casa Del Libro ,
FNAC ,
Libelista
</td>
</tr>
</table>
</div>
</div>
</main>
There are different ways of doing this.
Here's a solution that involves using float:left style for your table:
table {
float: left;
}
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
This one involves putting your table and image in yet another table:
img {
width: 100px;
height: 100px;
}
<table>
<tr>
<td>
<table>
<tr>
<td>Price</td>
<td>$5</td>
</tr>
<tr>
<td>Author</td>
<td>Bob</td>
</tr>
</table>
</td>
<td>
<div>
<img
src="https://via.placeholder.com/120.png?text=Book+Image"
alt="Book Image Here">
</div>
</td>
</tr>
</table>
I would like to have text within a table cell to be positioned a little bit higher, near the top. Please take a look at the provided screenshot. You can see in the TD below Column 1 how I want it to look like:
https://jsfiddle.net/38f1aru6/1/
HTML:
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
CSS:
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
I'm new to HTML and CSS... and a little bit shocked how complicated some simple styling can be.
My first guess was text alignment within a cell... vertical-align? Didn't work.
Then I tried to use an element with absolute positioning within an element with relative positioning. It did work ... almost ... but the text did flow out of the cell.
I would be very grateful if you could show me the right direction to solve this (easy?) task.
Edit:
I want to keep the yellow bar in the same position, but I want to move the text within the bar upward.
It seems from comments that you want to keep the yellow bar in the same position, but you want to move the text in it upward. That is not hard, but it does involve adding extra markup; otherwise it's impossible to separate the text from the background in that way. So, here you go.
.yellow_marked {
background-color: yellow;
}
table {
border: 1px solid black;
}
td, th {
border: 1px solid;
}
/* added css */
caption {
font-weight: bold
}
.yellow_marked>span {
position: relative;
top: -2px;
}
<table class="table_text">
<caption>
Title
</caption>
<tbody>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
</tr>
<tr>
<td>
<span class="td_content yellow_marked"><span>Cell content here</span></span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
Also, I'm sorry for changing your HTML, but you were using non-semantic markup for the title and the column headers, not to mention obsolete and unnecessary elements; couldn't bear to leave those in.
If you want, you can use the new CSS with the old HTML though.
you can use vertical-align:super on the span inside ( on .td-content )
see snippet below or jsFiddle
let me know if this is what you want
.td_content
{
vertical-align:super;
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
vertical-align:top works.
.td_content
{
}
.yellow_marked
{
background-color: yellow;
}
table
{
border: 1px solid black;
}
td
{
border: 1px solid;
height: 50px;
vertical-align: top; /* To move the text to the top */
padding-top: 5px; /* To create a gap at the top */
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
You could add the yellow background to the td instead. And then use a negative margin on the span element.
fiddle
.td_content {}
.yellow_marked {
background-color: yellow;
}
.yellow_marked span {
display: block;
margin-top: -4px;
}
table {
border: 1px solid black;
}
td {
border: 1px solid;
}
<table class="table_text">
<tbody>
<tr>
<td colspan="4">
<center>
<b>Title</b>
</center>
</td>
</tr>
<tr>
<td>
<center>
<b>Column1</b>
</center>
</td>
<td>
<center>
<b>Column2</b>
</center>
</td>
<td>
<center>
<b>Column3</b>
</center>
</td>
<td>
<center>
<b>Column4</b>
</center>
</td>
</tr>
<tr>
<td class="yellow_marked">
<span class="td_content">Cell content here</span>
</td>
<td>
<span class="td_content yellow_marked">Cell content here</span>
</td>
<td>lirum</td>
<td>larum</td>
</tr>
</tbody>
</table>
I want to split screen to two area left and right,in right segment show a image and in right segment show textbox,for that purpose write this html code:
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;" align="center">
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
but when i run the html page ,image not fit to the table column height,and i must scroll the browser to see all of the page,i want just fit to the screen height,my out put i this :
Use viewport units vh/vw, and to keep aspect ratio on the image, set the style on the image to display:block;max-width:50vw;max-height:100vh
html, body {
margin: 0;
}
table {
border-collapse: collapse;
}
td {
padding: 0;
vertical-align: top;
}
<table style="width:100vw">
<tr>
<td style="width:50vw;height:100vh;" align="center">
<img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
</td>
<td style="width:50vh;">
behzad
</td>
</tr>
</table>
in this case you'd better use background-image instead of <img> to avoid stretching
check the following demo
html,body{
height:100%;
}
table{
height:100%;
}
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;background-image:url(http://placehold.it/600x600)" align="center">
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
emphasized text
instead of this section
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
try this section
<img src="../Content/45.png" height="50%" />
I hope it works
I have three tables on my page, each with one row, and three data cells inside.
My issue is, when adding text to a cell, it is increasing the height of the table though I have already defined a height. My second issue is positioning the pictures in the final (3rd) data cells to be in the middle.
#snake {
background-color: #c4df9b;
}
#bat {
background-color: #e2e2e2;
margin-top: 18px;
margin-bottom: 18px;
}
#monkey {
background-color: #c69c6d;
}
#monkeygraphic {
padding-top: 5px;
}
.animalcontainer {
width: 682px;
height: 200px;
}
.animalcontainer td {
border: 1px solid black;
width: 227px;
text-align: center;
}
<div id="main-left">
<table id="snake" class="animalcontainer">
<tr>
<td>
<img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
</td>
<td>sad</td>
<td id="snakepic">
<img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
</td>
</tr>
</table>
<table id="bat" class="animalcontainer">
<tr>
<td id="batgraphic">
<img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
</td>
<td>
<h1>sad</h1>
</td>
<td id="batpic">
<img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
</td>
</tr>
</table>
<table id="monkey" class="animalcontainer">
<tr>
<td id="monkeygraphic">
<img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
</td>
<td>
<h1>sad</h1>
</td>
<td id="monkeypic">
<img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
</td>
</tr>
</table>
</div>
Silly me, i've just learnt the vertical-align css "thing" which seems to have sorted my issue.
Thanks to anybody who read the question though.
(Fix: giving my middle td cells a class, and adding vertical-align: top; to the css)
Im trying to create a dynamic site that will display a specified profile image throughout the page in various areas.
As such, I'd like to have only one file, and resize it to fit in each area, much like Facebook does with its usergroups and profile pics.
I had no problem doing this until i tried to put the image inside a table:
HTML
<table width='600px'>
<tr>
<td rowspan="3" width="75px" height="75px">
<div id="cp_image" class="hidden rborder">
<img class="cp_img_resize" src="<?php echo $profile[0]['cp_img_loc'] ?>"/>
</div>
</td>
<td>
<strong><?php echo $profile[0]['name'] ?></strong>
</td>
</tr>
<tr>
<td>
<em><?php echo $profile[0]['description']?></em>
</td>
</tr>
<tr>
<td><?php echo $popular ?></td>
</tr>
</table>
My CSS
#cp_image {
width: 100px;
height: 100px;
}
#cp_name {
height: 35px;
min-width: 200px;
}
.cp_img_resize {
width:100px;
height: auto;
}
Is there something I'm missing? Any reason the image is not resizing?
Thanks
You are setting the width of the image TD inline to a smaller px:
<td rowspan="3" width="75px" height="75px">
The width of the TD is overriding the width you are declaring for the IMG.
See http://jsfiddle.net/DmnV7/2/
CSS:
.table{
width:600px;
}
.cp_img{
height:75px;
width:75px;
}
.cp_img>img {
max-height:75px;
max-width:75px;
display:block;
margin:0 auto;
}
HTML:
<table class="table">
<tr>
<td rowspan="3" class="cp_img">
<img src="[image]" />
</td>
<td>
<strong>Name</strong>
</td>
</tr>
<tr>
<td>
<em>Description</em>
</td>
</tr>
<tr>
<td>Popular</td>
</tr>
</table>