how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts
it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>
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'm struggling with TABLE HTML.
I have no idea why this table tag doesn't work properly in browser
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
<td rowspan="3">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">1-3</td>
</tr>
</tbody>
</table>
The html above would be rendered like this
However the view I expected to see is like this
As I figured out, If I want to see what I want in browser, I should fix rowspans like this
<table border="1">
<tbody>
<tr>
<td rowspan="1">1-1</td>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-2</td>
</tr>
<tr>
<td rowspan="1">1-3</td>
</tr>
</tbody>
</table>
But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.
According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
</tr>
</tbody>
</table>
Have you tried flexbox yet? It is little bit different approach to solve this.
#main {
width: 100px;
height: 150px;
border: 1px solid #c3c3c3;
align-items: stretch;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 50px;
height: 50px;
line-height: 45px;
text-align: center;
}
#right {
width: 50px;
height: 150px;
}
#right div {
width: 50px;
height: 75px;
line-height: 70px;
text-align: center;
}
<div id="main">
<div style="background-color:lightgrey;" >1-1</div>
<div style="background-color:grey;">1-2</div>
<div style="background-color:lightgrey;">1-3</div>
<div id="right">
<div id="right" style="background-color:lightblue;">2-1</div>
<div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>
I am struggling to put the cells containing { Lazy, Dog, Then, It } under the same header (with a colspan of 1)
I've tried creating div tags within my cell, creating 2 cells, and all the possible widths and colspan combinations I can think of.
Using div tags and CSS I can get Lazy and Dog under the header, but they are not individual cells.
<html>
<head>
<style>
table,td,tr,th{
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Quick</th>
<th>brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=2> prey to a lion </td>
</tr>
</table>
</body>
</html>
Thank you for any advice.
add colspan="2" to <th>brown fox</th>
you don't have to put div inside <td> to separate data
then edit your <td colspan=2> prey to a lion </td>
to <td colspan="3"> prey to a lion </td>
here is the working fiddle, hope it helped you
https://jsfiddle.net/LLa90017/1/
Easy as pie as follows:
table, td, tr, th {
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
<table>
<tr>
<th>Quick</th>
<th colspan="2">brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td>lazy</td>
<td>dog</td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=3> prey to a lion </td>
</tr>
</table>
I'm new to web development. I'm building a simple site using HTML and CSS. I have a page with 2 price lists made from tables. I have them both in one div and I want them on top of each other. There is a picture to the right of them. In firefox all is ok when I use absolute position, but in IE7 the picture pops up in between the two tables. I've tried floating right and left, positioning absolute and relative. Is it something to do with Quirks? I also changed the doctype to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
This a bit of my code.
HTML:
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
<tr>
<table>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
And CSS: (My last attempt using float)
#pricepicture {
float: right;
margin-right: 40px;
margin-top: 100px;
border: 1px solid #2c2e32;
height: 365px;
width: 310px;
}
#table {
float: left;
margin-left: 40px;
margin-top: 50px;
border-collapse: collapse;
}
#price {
float: left;
margin-left: -5px;
margin-top: 40px;
}
td {
text-align: left;
padding: 0.2em;
font-size: 1.3em;
}
th {
text-align: left;
padding: 0.2em;
font-size: 1.1em;
}
tr {
height: 20px;
}
I've been searching the Stack overflow Questions for days. Please help before I throw my laptop out of the window!
Thanks....
There are some HTML syntax errors. You must ensure that all tags are properly closed, and in the correct order. See the following.
<div id="price">
<table>
<tr>
<th>Cutting</th>
<th>Stylist</th>
<th>Senior Stylist</th>
</tr>
<tr>
<td>Men</td>
<td>£32</td>
<td>£35</td>
</tr>
<tr>
<td>Women</td>
<td>£36</td>
<td>£40</td>
</tr>
<tr>
<td>Restyle</td>
<td>£40</td>
<td>£45</td>
</tr>
<tr>
<td colspan="3">student discount 10% Mon-Fri only</td>
</tr>
</table>
<table>
<tr>
<td>Half Head foils</td>
<td>From £55</td>
</tr>
<tr>
<td>Full Head foils</td>
<td>From £75</td>
</tr>
<tr>
<td>Colour between foils</td>
<td>From £15</td>
</tr>
<tr>
<td>Organic Permanent colour</td>
<td>From £45</td>
</tr>
<tr>
<td>Semi-Permanent colour</td>
<td>From £40</td>
</tr>
<tr>
<td>Colour correction</td>
<td>By Quotation</td>
</tr>
</table>
</div>
<div id="pricepicture">
<img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
</div>
I've temporarily inherited the responsibility to look after the website front end to our project as our web maintainer has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:
The two columns must be justified against each other in the middle, with a small space inbetween.
The table should expand so that all the text in each cell is on the same row.
The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).
I think I've managed to capture 1 and 2 okay - this table should expand if you add longer th/td s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <caption>, but that didnt help - it's still centered above the entire table, not centered above the column split.
So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.
EDIT:
Screenshot (red lines just for marking centre, not actually on table IRL):
The Solution
Its a bit tricky, but you could do this:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="details">
<table class="center">
<tr><td> </td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td> </td></tr>
<tr>
<th class="details-column-left">Title</th>
<td width="1"> </td>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td> </td>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td> </td>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td> </td>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td> </td>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td> </td>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
it's, not really clean and tidy, but it should work out just fine
greetz