What i am trying to do is to make HTML similar to this image.
I tried Below HTML with table and with div as well. but text is not aligning proper. Not sure what is the best way to do it. As i am using bootstrap.
Here is my HTML that i tried.
h1{
font-size:45px;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
You can try with elements to get the result you want.
<div class="item">
<span class="count">1</span>
<div class="txt">
<h2>Shopping Cart</h2>
<p>Manage Your Item list</p>
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.clear {
clear: both;
}
.count {
float: left;
font-size: 45px;
width: 30px;
}
.txt {
margin-left: 40px;
}
.txt h2,
.txt p {
margin: 0;
}
</style>
try this
<style>
.sc-col-4{
width: 33.33%;
background: #ddd;
height: 150px;
}
.left-box{
background:#007bff;
padding: 1.5rem; color: white;
padding-right: 3rem;
padding-left: 3rem;
margin-right:1.3rem;
float:left;
font-size: 50px;
}
.right-box{
float: left;
}
</style>
<div class="sc-col-4">
<div class="left-box">1</div>
<div class="right-box">
<div style="padding-top: 1rem; font-weight:600; font-size: 1.25rem; color: #007bff;">$1.999,50</div>
<div style="color: #868e96; font-weight: 700; font-weight: bold">INCOME</div>
</div>
</div>
h1{
font-size:45px;
}
#bottom{
vertical-align:bottom;
}
#top{
vertical-align:top;
}
td{
padding:0;
margin:0;
line-height:1;
}
<table>
<tr>
<td rowspan="2"><h1>1</h1></td>
<td id='bottom'>Shopping Cart</td>
</tr>
<tr>
<td id='top'>small content</td>
</tr>
</table>
Your code is actually working but the output comes like that due to the size of each cell in table try this :-
<table >
<tr>
<td rowspan="2"><h1>1</h1></td>
<td style="vertical-align:bottom">Shopping Cart</td>
</tr>
<tr>
<td style="vertical-align:top">small content</td>
</tr>
</table>
A solution using styles as mentioned above would probably be cleanest. But if you're looking for something purely within the table element, you could add a nested table as follows.
Hope this helps!
h1 {
font-size: 45px;
}
<table>
<tr>
<td rowspan="2">
<h1>1</h1>
</td>
<td>
<table cellspacing="0">
<tr>
<td>Shopping Cart</td>
</tr>
<tr>
<td>small content</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I would like to create some text like this.
I used this code, but it didn't work:
woman <span style="padding-left:40px"> TextTextTextText</span> <br>
Man <span style="padding-left:40px"> TextTextTextText</span>
What should I use instead?
<style>
table {
border: 0;
border-collapse: collapse;
}
.pl-40 {
padding-left: 40px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>Woman</td>
<td class="pl-40">TextTextTextText</td>
</tr>
<tr>
<td>Man</td>
<td class="pl-40">TextTextTextText</td>
</tr>
</table>
</body>
</html>
You might want to use a table:
.left {
text-align: left;
}
.right {
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td class="left">Woman</td>
<td class="right">TextTextTextTop</td>
</tr>
<tr>
<td class="left">Man</td>
<td class="right">TextTextTextBottom</td>
</tr>
</tbody>
</table>
</body>
</html>
If you want some more space between them, then you can add padding-right: 40px; to the .left declaration in the CSS:
.left {
text-align: left;
padding-right: 40px;
}
As Prem Signh said in his answer, you can hide the border with <table style="border: 0; border-collapse: collapse;"> instead of <table>.
Try using something like this:
.left {
display: inline-block;
width: 50px;
}
.right {
padding-left: 40px;
}
<div>
<span class="left">woman</span>
<span class="right">TextTextTextText</span>
</div>
<div>
<span class="left">Man</span>
<span class="right">TextTextTextText</span>
</div>
I have a simple HTML code where I draw a table and assign different classes to the Alternative rows :
<div id="content">
....
<table>
<tr class="a1"> ... </tr>
<tr class="a2"> ... </tr>
</table>
....
</div>
In my CSS I have the following definitions
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
background-color: #F1F1F1;
}
#content tr.a2 {
background-color: #F2FFFF;
}
When my HTML page loads background color remains white.
However if I update my CSS by removing "#content" :
tr.a1 {
background-color: #F1F1F1;
}
tr.a2 {
background-color: #F2FFFF;
}
everything works correctly. It seems like link to "content" property is not working. How can I fix it?
thank you in advance.
You need to wrap additionally in <td>...</td> tags.
Here is the correct structure for a regular table:
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
You can read more here.
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
color: #F1F1F1;
}
#content tr.a2 {
color: #F2FFFF;
}
<div id="content">
<table>
<tr class="a1">
<td>123<td>
</tr>
<tr class="a2">
<td>123<td>
</tr>
</table>
</div>
If you write #content tr.a1 it means tr is right after #content
which is obviously not, you have table in between.
I STAND CORRECTED
I have been honestly coding for 10 years wrong...
.class1 .class2 .name1 .name2 Selects all elements with name2 that
is a descendant of an element with name1
You can write that like this to work:
#content * tr.a1
or
#content table tr.a1
Please learn how to use CSS Selectors
Examples:
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content table tr.a1 {
background-color: red;
}
#content * tr.a2 {
background-color: blue;
}
<div id="content">
<table>
<tr class="a1">
<td>tr 1</td>
</tr>
<tr class="a2">
<td>tr 2</td>
</tr>
</table>
</div>
I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
Firstly, this is a duplicate question: Equal-height scaling cells in an html table
The user that asked the question above didn't get a solution for the same issue I'm having.
Within the JSFIDDLE you will notice a cell with a red background. This cell is the highest and I need all other cells to pick up the highest cell height and span to the corresponding cell height.
The solution cannot contain fixed heights as this must be dynamic
Here is a mock up of what I'm trying to achieve: http://jsfiddle.net/pAz6G/
Here is HTML:
<table class="left" cellspacing="0" borderspacing="0" >
<tr>
<td>
<h2>Very Servere</h2>
<p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
<ul>
<li>Heavy salt deposits</li>
<li>The almost constant smell of saly spray in the air.</li>
<li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
</ul>
<p>This environment may be extended inland by revailing winds and local coniditions</p>
</td>
</tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
<tr>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td class="red">Rain washing plus manual washing every 3 months</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
</tr>
</table>
Here is CSS:
/* Column Styling */
.left {
float: left;
width: 350px;
}
.left td {
padding: 10px;
}
.right {
float: left;
width: 400px;
}
/*********************************************/
/* General Styling */
.no-padding {
padding: 0;
}
td {
background: grey;
color: white;
vertical-align: top;
}
p {
margin: 0;
}
.red {
background: red;
}
/*********************************************/
/* Section Styling */
.section {
border-left: 1px solid #fff;
}
.section-heading {
display: block;
padding: 10px;
}
/*********************************************/
/* Nested Tables */
.inner {
width: 100%;
}
.inner td {
border-top: 1px solid #fff;
padding: 10px;
}
/*********************************************/
Instead of using multiple tables, try using one table.
Keeping it simple :)
I'm trying to get a table to be 100% width of a div...
But when I use width=100% it expands outside of the borders... When using on different devices...
So I'd just like this table, across full width - and the N/A button right aligned...
Seems it is always extending past borders on different devices...
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
Take this example :
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.
div.flist{width:500px;}
div.flist table{width:100%;}
This should work in most cases.
if you need mobile, use media queries instead.
Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
Just write table tag like this
<table width=100%></table>
This might have worked
Added this also into table
style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>