Setting Table column widths

[rocky48]

I am trying to set the column widths in my HTML 5 script, but what ever I do the widths stay the same?

 

I found that the <col width=""> tag does not work in HTML 5.

 

So I tried  <th style="width:130px">Week #</th> and this did not work.

 

I have also created a special table div style #table1.

 

Nothing changes when I make these changes!

 

Here is the table part of my script:
 

<div id="table1">
	<table width="250%" cellspacing="1" border="1" BGCOLOR="white"> 
	

<tr>
<th style="width:130px">Week #</th>
    <th style="width:80px">18</th>
	<th style="width:80px">19</th>
	<th style="width:80px">20</th>
	<th style="width:80px">21</th>
	<th style="width:80px">22</th>
	<th style="width:80px">23</th>
	<th style="width:80px">24</th>
	<th style="width:80px">25</th>
	<th style="width:80px">26</th>	
</tr>
	<tr>
	<td>Visits</td>
	<td>300</td><td>346</td><td>266</td><td>216</td><td>339</td><td>288</td><td>231</td><td>213</td><td></td></tr>	
	<tr>
	<td>From</td>
	<td>28/04/2014</td><td>05/05/2014</td><td>12/05/2014</td><td>19/05/2014</td><td>26/05/2014</td><td>02/06/2014</td><td>09/06/2014</td><td>16/06/2014</td><td>23/06/2014</td>
	</tr>
	<tr>
	<td>To</td>
	<td>04/05/2014</td><td>11/05/2014</td><td>18/05/2014</td><td>25/05/2014</td><td>01/06/2014</td><td>08/06/2014</td><td>15/06/2014</td><td>22/06/2014</td><td>29/06/2014</td>
	</tr>
	<tr>
	<td>USA</td><td>161</td><td>158</td><td>148</td><td>79</td><td>132</td><td>105</td><td>81</td><td>70</td><td></td>
etc.........
</table>	
		</div>

here is my style.css script:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #F1F1F1 url(images/img01.gif) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: black;
}
quote {
font-size:medium;
 }

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #023848;
 }


h1 {
	font-size: 4em;
    
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
font-size:large;
}
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}

a {
	text-decoration: none;
	color: #4486C7;
}
p {
font-size:large;
 }

a:hover {
}

#wrapper {
	width: 980px;
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header {
	width: 980px;
	height: 280px;
	margin: 0 auto;
	padding: 0px;
	background: url(images/head!.png) no-repeat left top;
}

/* Logo */

#logo {
	float: right;
	margin: 0;
	padding: 0;
	
}

#logo h1, #logo p {
	margin: 0;
	padding: 10px;
   
}

#logo h1 {
	float: left;
	padding-top: 223px;
	letter-spacing: -1px;
	text-align: right;
	text-transform: capitalize;
	font-size: 3.8em;
    color: purple;
}

#logo p {
	float: left;
	margin: 0;
	padding: 250px 0 0 10px;
	font: normal 20px Arial, Helvetica, sans-serif;
	font-style: italic;
	 color: purple;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	 color: black;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 60px;
	padding: 20px 0px 0px 0px;
	background: #E2E2E2;
	border-bottom: 4px solid #FFFFFF;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 10px 0 0 20px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 170px;
	padding: 6px 5px 2px 5px;
	border: 1px solid #DEDEDE;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #5D781D;
}

#search-submit {
	width: 50px;
	height: 22px;
	border: none;
	background: #B9B9B9;
	color: #000000;
}

/* Menu */

#menu {
	width: 980px;
	height: 90px;
	margin: 0 auto;
	padding: 0;
}

#menu ul {
	margin: 0;
	padding: 50px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	width: 100px;
	height: 30px;
	margin-right: 1px;
	padding: 9px 0px 0px 0px;
	background: url(images/img02.gif) no-repeat left top;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
	padding-left: 0;
}

/* Page */

#page {
	width: 940px;
	margin: 0 auto;
	padding: 0px 0px 0px 40px;
	background: url(images/img03.gif) repeat-y left top;
}

#page-bgtop {
	padding: 20px 0px;
}

#page-bgbtm {
}

/* Content */

#content {
	float: left;
	width: 580px;
	padding: 30px 0px 0px 0px;
}

.post {
	background: url(images/img07.gif) no-repeat left 50px;
	margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
	height: 38px;
	margin-bottom: 10px;
	padding: 12px 0 0 0px;
	letter-spacing: -.5px;
	color: #000000;
}

.post .title a {
	color: #023848;
	border: none;
}

.post .meta {
	margin-bottom: 30px;
	padding: 5px 0px 15px 0px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

.post .meta .date {
	float: left;
}

.post .meta .posted {
	float: right;
}

.post .meta a {
}

.post .entry {
	background: url(images/img08.gif) no-repeat left top;
	padding: 0px 0px 20px 0px;
	padding-bottom: 20px;
	text-align: justify;
}

.links {
	padding-top: 20px;
	font-size: 12px;
	font-weight: bold;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 280px;
	margin: 0px;
	padding: 0px 20px 0px 0px;
	color: lightgray;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px dashed #D1D1D1;
	margin: 0px 30px;
	border-left: none;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 38px;
	padding-left: 30px;
	letter-spacing: -.5px;
	font-size: 1.8em;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 30px 20px 30px;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
	color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}
#dtable {

font-size:small;
color:black;

 }
#dtable>h1 {
background: #F1F1F1;
 } 
#table {
font-size:small;
color:black;
text-align:center;
width:200px;
  }
#table1 {
font-size:small;
color:black;
text-align:center;
width:200px;
border: 1px solid black;
table-layout: fixed;
  }
th, td {
border: 1px solid black;
overflow:hidden;
width: 100px;
 }   
/* Footer */

#footer {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	background: #ECECEC;
	border-top: 1px solid #DEDEDE;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 20px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #A0A0A0;
}

#footer a {
	color: #8A8A8A;
}

I am completely baffled as to why the widths of the columns does not change when I try to fix the widths.  They are all the same size?

 

Please enlighten me where I am going wrong?

[maxxd]

Remove the width attribute in your table opening tag.

[rocky48]

Did as you said but had no effect?

 

I researched the internet and one suggestion was to add <div> tag inside <th> and define width inside the <div> tag.

 

Viz.

<th><div style="width:120px">Week #</div></th>

 

This now works!

[Azercii]

In HTML 5 you can use <col> tag to style the width of each column.

<col style="width:35%">
<col style="width:40%">
<col style="width:25%">

Place it under your <table> tag. They all need to total 100%, so as you have 10 columns, that would make each <col> 10% width. For tidier code, I would go with the css route;

 

CSS:

table
{
    table-layout: fixed;
    width: 250%;
}

HTML:

<table cellspacing="1" border="1" BGCOLOR="white">
<tr>
<th>Week #</th>
    <th>18</th>
	<th>19</th>
	<th>20</th>
	<th>21</th>
	<th>22</th>
	<th>23</th>
	<th>24</th>
	<th>25</th>
	<th>26</th>	
</tr>
	<tr>
	<td>Visits</td>
	<td>300</td><td>346</td><td>266</td><td>216</td><td>339</td><td>288</td><td>231</td><td>213</td><td></td></tr>	
	<tr>
	<td>From</td>
	<td>28/04/2014</td><td>05/05/2014</td><td>12/05/2014</td><td>19/05/2014</td><td>26/05/2014</td><td>02/06/2014</td><td>09/06/2014</td><td>16/06/2014</td><td>23/06/2014</td>
	</tr>
	<tr>
	<td>To</td>
	<td>04/05/2014</td><td>11/05/2014</td><td>18/05/2014</td><td>25/05/2014</td><td>01/06/2014</td><td>08/06/2014</td><td>15/06/2014</td><td>22/06/2014</td><td>29/06/2014</td>
	</tr>
	<tr>
	<td>USA</td><td>161</td><td>158</td><td>148</td><td>79</td><td>132</td><td>105</td><td>81</td><td>70</td><td></td>
etc.........
</table>

UPDATE: http://jsfiddle.net/Hhg2x/

 

 

I know you've solved this, just thought I'd chime in and add a further suggestion in case others find the thread

Edited June 25, 2014 by Azercii