HTML/CSS/Javascript - Align Text In Table

Question

I am trying to align the text in my table. It currently looks like this:

I would like to align the tile (in bold) in the center. Also, I am trying to get the values on the right, moved to the left.

Currently I have:

Javascript:

var table = $('<table/>',
    {
        id: 'table',
        "class":'tables'

    });

// ************************ Row 1 ************************************
row1 = $('<tr></tr>');
var head = $('<th></th>').addClass('dealHead').text(value.dealTitle);
row1.append(head);
table.append(row1);
// ********************************************************************

// ************************ Row 2 ************************************
row2 = $('<tr></tr>');
var col1 = $('<td></td>').addClass('name').text("Name: ");
var col2 = $('<td></td>').addClass('nameValue').text(value.name);

row2.append(col1);
row2.append(col2);                  
table.append(row2);
// ********************************************************************

// ************************ Row 3 ************************************
row3 = $('<tr></tr>');
col1 = $('<td></td>').addClass('address').text("Address: ");
col2 = $('<td></td>').addClass('addressValue').text(value.address);

row3.append(col1);
row3.append(col2);                  
table.append(row3);

// ********************************************************************

table.appendTo('body')

CSS:

body
{
background-color:#5CD65C;
}

.dealHead
{
text-align:center;
}


.name
{
border-top:thick double #0F0F00;
border-left:thick double #0F0F00;
border-bottom:thick double #0F0F00;

}

.nameValue
{

border-top:thick double #0F0F00;
border-right:thick double #0F0F00;
border-bottom:thick double #0F0F00;
text-align:left;

}

.address
{
border-top:thick double #0F0F00;
border-left:thick double #0F0F00;
border-bottom:thick double #0F0F00;
}

.addressValue
{

border-top:thick double #0F0F00;
border-right:thick double #0F0F00;
border-bottom:thick double #0F0F00;
text-align:left;
}


.tables
{
width="400";
border-collapse: collapse;

}

HTML

Pretty much an empty <body>

Would anyone know what I am doing wrong here?

in order to center the header you add colspan=2 that works

Sridhar R
– Sridhar R

2013-10-30 06:14:21 +00:00
Commented Oct 30, 2013 at 6:14 — Sridhar R
– Sridhar R, Commented Oct 30, 2013 at 6:14

Sridhar R · Accepted Answer · 2013-10-30 06:22:13Z

1

In order to center the header you add colspan=2 that works,align the td's you have a class so add text-align-left like this

row1 = $('<tr></tr>');
var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

CSS

.test td {
    text-align: right;
}

Example HTML

<table class="test">
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>

edited Oct 30, 2013 at 6:22

answered Oct 30, 2013 at 6:17

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Garrison Over a year ago

This is the best way to do this, and can't think of another way.

kelunik · Accepted Answer · 2013-10-30 06:47:54Z

0

CSS

.tables { width="400"; ...

should be

.tables { width: 400px; ...

In order to have both cells the same with:

.tables td { width: 50%; }

Javascript

var head = $('<th></th>').addClass('dealHead').text(value.dealTitle);

This is only one cell, make it like two:

var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

jsFiddle

edited Oct 30, 2013 at 6:47

answered Oct 30, 2013 at 6:19

kelunik

6,9492 gold badges44 silver badges73 bronze badges

1 Comment

user2268507 Over a year ago

Thanks for that! Also made use of the width attribute.

Siva Tumma · Accepted Answer · 2013-10-30 06:26:56Z

0

if this is plain html, I could have made the header <th> to be of colspan=2. similarly make your header

var head = $('<th colspan="2"></th>').addClass('dealHead').text(value.dealTitle);

hope this would help.

answered Oct 30, 2013 at 6:26

Siva Tumma

1,70112 silver badges23 bronze badges

Collectives™ on Stack Overflow

HTML/CSS/Javascript - Align Text In Table

3 Answers 3

1 Comment

CSS

Javascript

jsFiddle

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

CSS

Javascript

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related