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>
Related
how to transform my HTML table to responsive without additional CSS file?
<table style="overflow-x:auto;">
<tbody>
<tr>
<td><b>title 1</b></td>
<td><b>title 2</b></td>
<td><b>title 3</b></td>
</tr>
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</tbody>
If you want to add CSS to make your table responsive, but do not want the CSS to be in a separate file, then you have two options:
You can put your CSS rules inside a <style> tag in the HTML file (reference)
You can use inline styles as #Peter suggested. (reference)
Inline styles can quickly become messy and hard to read, so I would recommend that you use a <style> tag.
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.
Why cant i get background to change when i reference via a css style sheet, but works okay when done directly with color on inline style (i.e only columns 1 and 4 change their background color)
<table>
<tr>
<td bgcolor="#D6D6C2">Column 1</td>
<td class="releasetableheading">Column 2</td>
<td class=".releasetableheading">Column 3</td>
<td style="background-color:#D6D6C2">Column 4</td>
</tr>
</table>
CSS
.releasetableheading {
background-color=#D6D6C2;
}
See http://jsfiddle.net/ijabz/vnkqhz5h/ for full example
Your syntax is off. Use colon instead of equals sign, and remove period from class declaration.
Updated Fiddle - http://jsfiddle.net/vnkqhz5h/1/
HTML:
<table>
<tr>
<td bgcolor="#D6D6C2">Column 1</td>
<td class="releasetableheading">Column 2</td>
<td class="releasetableheading">Column 3</td>
<td style="background-color:#D6D6C2">Column 4</td>
</tr>
</table>
CSS:
.releasetableheading {
background-color: #D6D6C2;
}
Note that bgcolor is deprecated and should not be used and you should use classes, not inline styles whenever possible.
You should not use bgcolor attribute, it's not supported in HTML5. In HTML, you simply define your class that way :
<td class="myClass"></td>
And you can define a unique ID for an HTML element that way
<td id="myId"></td>
Then, in your CSS, the syntax has to be written that way:
.myClass{
background-color: #000;
}
#myId{
background-color: #fff;
}
Suffix for class is a dot (.) and for id is a hashtag (#).
You always write your property that way in CSS. "property: value".
Hope it helped !
Sorry to beat a dead horse, but I need some advice on centering the contexts inside a div tag. I have a div tag with a table inside it (the div with the context class). I have an align attribute on it and it produces the results I want, but I would like to do this properly with css. If I set the div's 'text-align' to 'center', that propagates down into the table cells, which is not what I want. So... how do I center the div's contents without affecting the table cells? Here is a fiddle for this code.
<style type="text/css">
* { font-family: Arial; font-size: 12px; }
.container { padding-bottom: 10px; }
.content { background-color: #EEEEEE; }
</style>
<div class="container">
<div>Demo</div>
<div class="content" align="center">
<table>
<tbody>
<tr>
<td>Item 1</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 2</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 3</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 4</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 5</td>
<td style="padding-left: 10px;">remove</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of the align attribute, do this:
table { margin: 0 auto; }
Live demo: http://jsfiddle.net/V9JRP/1/
Of course, you may want to use an ID or class selector to select the table...
The rule is this: If the element is a block-level element, and you want to center it, set margin:0 auto; on it. This may require the width of that element to be set explicitly.
div.content table {
margin: 0 auto;
}
table {width:100px;margin:0 auto;}
That should set you right, just specify the width you are after.
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>