I am trying my hand at making a website for my small start up. Now the thing is that I want to make a central area where the background color is white and one where the background color is light grey. I made a table with the background color white and aligned it in the center, but it just appears at the bottom of the page. What is happening?
<html>
<head>
<title>Memocups</title>
</head>
<body bgcolor="#d9d9d9">
<table align="center" width="50%" bgcolor="#ffffff">
<tr>
<p><h1>Memocups</h1><p>
<p><h3>What is a memocup?<h3><p>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>
A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</tr>
</table>
</body>
</html>
Simple table with three columns and two rows.
<table border=1>
<tr>
<td>cell 1<td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4<td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</table>
Here is how the table should be formatted:
<table width="50%" style="background-color:#fff;margin:0 auto;">
<tr>
<td>
<h1>Memocups</h1>
<h3>What is a memocup?</h3>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</td>
</tr>
</table>
I removed the p tags that you had around your headings as they are not necessary. Also note that bgcolor and align are deprecated and you should be using background-color and margin/float CSS instead. Also corrected an unclosed h3 tag and added the td(table cell).
That said, a table is not the correct element to use for this data. You should be using divs.
Related
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
I can't seem to find the answer to my issue. I have a table with two rows and two columns (like the code shown below), how do I center align the text in specific cells. I would like to center align the text in one or two of the cells - not all the cells.
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
I would recommend using CSS for this. You should create a CSS rule to enforce the centering, for example:
.ui-helper-center {
text-align: center;
}
And then add the ui-helper-center class to the table cells for which you wish to control the alignment:
<td class="ui-helper-center">Content</td>
EDIT: Since this answer was accepted, I felt obligated to edit out the parts that caused a flame-war in the comments, and to not promote poor and outdated practices.
See Gabe's answer for how to include the CSS rule into your page.
How about simply (Please note, come up with a better name for the class name this is simply an example):
.centerText{
text-align: center;
}
<div>
<table style="width:100%">
<tbody>
<tr>
<td class="centerText">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td class="centerText">Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
Example here
You can place the css in a separate file, which is recommended.
In my example, I created a file called styles.css and placed my css rules in it.
Then include it in the html document in the <head> section as follows:
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
The alternative, not creating a seperate css file, not recommended at all...
Create <style> block in your <head> in the html document. Then just place your rules there.
<head>
<style type="text/css">
.centerText{
text-align: center;
}
</style>
</head>
I have a table which has a caption which appears on top of the table.
I'd need another caption to appear at the bottom of the table. how would it be possible?
<table>
<caption>My Table - Start</caption>
<tbody></tbody>
<tfooter></tfooter>
<caption>My Table - End</caption>
</table>
You should put the <caption> at the top of the table, right below the <table> tag. Then you can use the CSS:
caption {
caption-side: bottom;
}
to get it below the table. And only one caption per table as a previous person wrote. If you need a table title, then either use <th> or put a heading outside the table and use CSS to position it correctly.
You could mock one by doing the following, and applying some CSS
<table>
<caption class="cap">some caption text</caption>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td colspan="3" class="cap foot">
This is pretty much a footer caption.
</td>
</tr>
</table>
Here's an example
I believe you can only have 1 caption per table and it must appear after the table tag.
You could add a div right after the table and put your caption there.
How to set position inside a table? I have table inside which I have span and certain links. I made <td> as center alignment and span texts starting from center, but when I do the same for all links <td> everything is displayed in center if it own. But I need to start all text at the same position. How to do this?
What i understand is that you want to align the text.
Try this way, also try to be more exact and send us a copy of your code.
But from what i understood try out this.
div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
In the following code I need to match the width when shrinking the window :
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
This is just a little example of the page, it would involve more divs and tables.
When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.
Is there any way to stop the div shrinking when table can't shrink any more?
I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.
Could any of you give me a solution other than JavaScript?
Thanks in advance.
Cesar.
I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.
<div style="background-color:red;">
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
</div>
You can use thead and colspan to display the title inside the table:
<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
Bonus point : your table structure now makes more sense from an accessibility point of view.
You can also use the caption element, but its formatting may be inadequate :
<table>
<caption style="background-color:blue;">The title</caption>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>