I built a table in HTML:
But the problem is that I could not center the table to the center of the screen, and I could not arrange it in such a way that the columns would be without indentations, and one below the other (i.e. 'aaaaa' would be below 'Name', 'bbbbb' would be below 'address' and 'ccccc' would be below 'phone').
Do you have any idea how to center the table and how to align the columns so that they will be without indentations? Thanks in advance!
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
This is a simple exercise in CSS- use margin: 0 auto to center it horizontally.
You could also do this with flex or other stylnig to suit as well. I added some borders and spacing for the ths and tds to demonstrate the alignment.
You can also style the content of the th's and the td's to give specific styling for each - eg- have the th a different font-size and color than the td's - but still have them left-aligned.
EDIT - I have just noticed that you have divs inside the table - this is invalid - the only valid child of a tbody - is a tr element. I have removed them from the code in my solution - sorry I didn't see that vbefore - dangers of copy / paste.
table {
border: solid 1px #e1e1e1;
border-collapse: collapse;
margin: 0 auto;
}
th, td{
border: solid 1px #e1e1e1;
padding: 4px 8px
}
th {
font-size: 12px;
color: #b9b9b9;
text-align: left
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td >aaaaa aaaaa </td>
<td >bbbbb bbbbb</td>
<td >ccccc ccccc</td>
</tr>
</tbody>
</table>
https://www.w3schools.com/howto/howto_css_table_center.asp
Add class="center" to the table html tag
<table class="center" id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
and add some CSS, such as
.center {
margin-left: auto;
margin-right: auto;
}
or (even simpler):
.center {
margin: 0 auto;
}
table{
margin:0 auto;
}
th,td{
text-align:left;
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >a</td>
<td >b</td>
<td >c</td>
</tr>
</div>
</tbody>
</table>
Please amend you codes to something similar to :
.div1{
width:100%;
}
table, th, td {
border: 1px solid black;
}
.table1{
margin: 0 auto;
}
<div class=div1>
<table class=table1>
<tr>
<td>Name</td>
<td>Adress</td>
<td>Phone</td>
</tr>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</table>
</div>
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>
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</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>
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>