SEARCH

Enter your search query in the box above ^, or use the forum search tool.

You are not logged in.

#1 2013-10-06 20:08:06

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Need advice with html table [SOLVED]

This is the code I am using to create my table. So far so good. I like it. Here is what I am trying to do. After every set of months for example January, I want to have a gap separating the months. The only way I could figure out is to put an empty row in the table which is getting really cumbersome. Is there a better way to do this, maybe with CSS?

Looking something like this:

Jan 01         April 01
Jan 02         April 02
Jan 03         April 03
Jan 04
                   May 01
Feb 01        May 02
Feb 02
Feb 03

Mar 01
Mar 02



</div><div id="I1206" style="display:block;clear: both;margin:0 0 0 0;" class="Text_Default">    
    <div id="I1206_sys_txt" class="sys_txt" style="margin:0px; padding:0px; color:; font:; background-color:;"><style>
table,td,th {border:0px solid black;}

table {width:100%;}
th {height:20px;border: 0px solid red;overflow: hidden;width: 100px;}


td {border: 0px solid green;overflow: hidden;width: 100px; text-align: center}
</style>




<table>

 <tbody><tr>
<th colspan="4" align="center"><font size="3">2013</font></th>
</tr>


<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJAN0613.mp3">Jan 06</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAPR0713.mp3">Apr 07</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUL0713.mp3">Jul 07</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITOCT0613.mp3">Oct 06</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJAN1313.mp3">Jan 13</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAPR1413.mp3">Apr 14</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUL1413.mp3">Jul 14</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITOCT1313.mp3">Oct 13</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJAN2013.mp3">Jan 20</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAPR2113.mp3">Apr 21</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUL2113.mp3">Jul 21</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITOCT2013.mp3">Oct 20</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJAN2713.mp3">Jan 27</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAPR2813.mp3">Apr 28</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUL2813.mp3">Jul 28</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITOCT2713.mp3">Oct 27</a></td>
</tr>
<tr>
<td></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAY0513.mp3">May 05</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAUG0413.mp3">Aug 04</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITFEB0313.mp3">Feb 03</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAY1213.mp3">May 12</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAUG1113.mp3">Aug 11</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITNOV1013.mp3">Nov 10</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITFEB1013.mp3">Feb 10</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAY1913.mp3">May 19</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAUG1813.mp3">Aug 18</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITNOV1713.mp3">Nov 17</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITFEB1713.mp3">Feb 17</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAY2613.mp3">May 26</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITAUG2513.mp3">Aug 25</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITNOV2413.mp3">Nov 24</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITFEB2413.mp3">Feb 24</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUN0213.mp3">Jun 02</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITSEP0113.mp3">Sep 01</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITDEC0113.mp3">Dec 01</a></td>
</tr>
<tr>
<td></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUN0913.mp3">Jun 09</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITSEP0813.mp3">Sep 08</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITDEC0813.mp3">Dec 08</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAR1713.mp3">Mar 17</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUN1613.mp3">Jun 16</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITSEP1513.mp3">Sep 15</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITDEC1513.mp3">Dec 15</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAR2413.mp3">Mar 24</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUN2313.mp3">Jun 23</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITSEP2213.mp3">Sep 22</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITDEC2213.mp3">Dec 22</a></td>
</tr>
<tr>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITMAR3113.mp3">Mar 31</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITJUN3013.mp3">Jun 30</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITSEP2913.mp3">Sep 29</a></td>
<td><a href="http://sd.mcran.com/assets/shows/2013/ITDEC2913.mp3">Dec 29</a></td>
</tr>
</tbody></table>

Last edited by rmcellig (2013-10-08 16:58:53)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

Help fund CrunchBang, donate to the project!

#2 2013-10-06 21:19:02

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

Padding or border attribute can go in 4 directions, top, left, bottom and right.
So try padding-bottom: 10px; on your <tr> tag

Last edited by wuxmedia (2013-10-06 21:21:44)

Offline

#3 2013-10-06 21:41:50

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Thanks wuxmedia!

So what you suggest would be using CSS? Wouldn't what you suggest pad every row bottom 10px instead of every four rows or wherever I need to have the gap? Maybe I'm not grasping what you are suggesting.

Last edited by rmcellig (2013-10-06 21:42:40)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#4 2013-10-06 22:10:44

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

oh god you can't do that with table's cell data.
Sorry. it has no effect at all.
<divs> yes.
looks like a re-code or stick those empty cells in.
have a look here for everything about tables.
http://css-tricks.com/complete-guide-table-element/
it's pretty long.

TBH honest a recode wouldn't be too bad, Search and Replace <td> with <p> - S & R <tr> with <div>
then the same with the close tags...

Offline

#5 2013-10-06 22:17:26

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Thanks again!! I was trying what you suggested and nothing was working. Now I know why. I guess that tables don't support padding even when using CSS. Using Divs? I understand using them for page layout but to display data? I know it can be done but I thought that using tables instead would be easier to maintain. I'm so new to this that I guess I am just rambling on..... smile

I'll see how I get along with the link you mentioned.


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#6 2013-10-07 03:28:17

spooky
#! Member
From: Србија
Registered: 2013-07-09
Posts: 55
Website

Re: Need advice with html table [SOLVED]

rmcellig wrote:

Thanks again!! I was trying what you suggested and nothing was working. Now I know why. I guess that tables don't support padding even when using CSS. Using Divs? I understand using them for page layout but to display data? I know it can be done but I thought that using tables instead would be easier to maintain. I'm so new to this that I guess I am just rambling on..... smile

I'll see how I get along with the link you mentioned.

Using divs and spans, or divs within divs where parent is default block, and child set to display:inline; or display:inline-block; ofcourse .. or maybe even better, instead of ul > li or ol > li you can try with using Dynamic/Description/Definition Lists, and transform them to the table format with css afterwards. You can play as much as You like.

Here is a link » B.6. CSS Properties, a single page from one of my test projects, an example of table mimic with p > span tags. And it can look identically like regular "gnumeric" table. But I prefer simple tables like on that link. Just a matter of free will.

It is a manual based on a quite old book there and the manual it self with all examples is covering just css levels 1 and 2, which is what You'll find appropriate. Back then, couple of years ago, I needed some bigger matherial instead of lorem, ipsum .. for one of projects, to test some sort of custom made database, so I decided to take that one, that particular google-book and to represent it with the missing thing.

Which is, lack of css level3 ammount.


You can't make a baby for one month by making 9 women pregnant.

Offline

#7 2013-10-07 06:32:04

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

a clear page, dealing in empty cells;
http://www.cs.tut.fi/~jkorpela/HTML/emptycells.html#css
if you want to stick with tables, you have to enter 'empty' data.
as spooky mentions; lists <ul> & <li> these are designed for lists, such as your list of shows.
put these in <divs> (with a list class or id) then you can play as much as you want.
and again, if you choose something other than tables;
geany's search and replace function makes 5 seconds work to change tables to lists.

It all boils down to how annoyed you are, with the tables.
<divs> for presenting data? please I encourage you to 'open/view page source' right click on you browser.
this forum, is only made up of divs and lists.

Offline

#8 2013-10-07 10:38:11

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Thanks spooky and wuxmedia!!

So you are saying that I can use divs and lists to display my shows the way I want to? And then use CSS to style? Sounds good to me. I will try that out.

I see what you mean about using divs and lists for the #! site.

I guess what my stumbling block is putting it all together step wise like:

Step 1 do this
Step 2 do this
Step 3 do this

I did have my shows in a list but then was not sure how to proceed to put it into four columns so that it would display something like my initial post above. I think that is where I need some guidance. If I could see an example of what it will look like doing it with divs and lists than I should be good to go. It's just a matter of taking the parts, in this case divs and lists and maybe something else that I missed and putting it all together. What I am also hoping is that this will be easy to maintain and change if need be.

I am using Geany and love the way I can replace code quickly using Search/replace.

Last edited by rmcellig (2013-10-07 10:40:49)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#9 2013-10-07 10:51:43

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

I was playing around on the w3schools site and this is what I came up with. I like it. This is what I want to do but now how do I get these into columns, and did I enter the codes correctly? I think I messed up with the <div> because I wasn't sure what I was doing. I think I am making headway and it looks like if I need to make changes, it's pretty easy.

I just need a little more guidance as to styling this code as well. Once I get the structure right, I'm good to go!!

<!DOCTYPE html>
<html>
<body>

<div>
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</div>
  
<div>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 04</a></dt>
</dl>
</div>

<div>
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</div>

</body>
</html>


This works as well without divs.

<!DOCTYPE html>
<html>
<body>


<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 04</a></dt>
</dl>



<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>


</body>
</html>

Just playing around with styles and this is what I come up with. Have to put this in four columns. Not sure what to do. Am I on the right track?

<style>
dl {
 float:left;
 width:8%;
}
</style>

<!DOCTYPE html>
<html>
<body>


<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 03</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 04</a></dt>
</dl>



<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 04</a></dt>
</dl>



<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>


</body>
</html>

There is light at the end of this tunnel! I just need a little more help assuming I am on the right track. smile

Last edited by rmcellig (2013-10-07 11:11:23)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#10 2013-10-07 12:58:15

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

well looks fine, i'd put width as 'auto', and add padding, that way doesn't matter if you use a longer name - the column will all be the largest width.
here is a useful site, with example, you can play with the code and it auto updates it;
http://codepen.io/anon/pen/inbqC
I'm sure there are other sites, offering on-the-fly code tweaking, I happen to like this one.
now you wanted these in 4 columns?
you might be best to put it in a width constrained div, as i have done, need to adjust to suit.
have fun.

Offline

#11 2013-10-07 13:20:23

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

have another look, i think it's pretty (not stylistically) neat now. even if i do say so myself  big_smile
an advantage of the fixed width divs is if you put just 2 shows in for a month it should retain its shapes.

Offline

#12 2013-10-07 15:38:14

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

wuxmedia wrote:

have another look, i think it's pretty (not stylistically) neat now. even if i do say so myself  big_smile
an advantage of the fixed width divs is if you put just 2 shows in for a month it should retain its shapes.

You mention to have another look. What am I looking at. Did you do something that you want me to take a look at?


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#13 2013-10-07 15:41:09

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Sorry! Now I get it. You were referring to some code you put in Codepen.

All I will be putting is the list is something like this:

Jan 01
Jan 02

So I can tweak the div width accordingly. I'll post back how I do. Thanks again!!!!!


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#14 2013-10-07 16:18:42

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

I can feel it. I'm almost there. Been playing around with the code you posted. Looks pretty flexible. So how do I organize it to look like this:

Jan 01
Jan 02
Jan 03
Jan 04

Feb 01
Feb 02
Feb 03
Feb 04

Mar 01
Mar 02
Mar 03
Mar 04



The second column would be the same as above but from Apr-June. The third column July-Sep and the fourth column Oct to Dec with the gap separating the months. It would be great when entering the code in Geany that I just have to enter Jan's info followed by Feb's info and so on and so fourth. This is what was getting me mixed up when doing tables


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#15 2013-10-07 16:56:05

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

I think I did it!! Take a look. At the moment it look like it is all to the left instead of being more spread out horizontally. Can't figure out how to control this.

<style>
  .wrapper{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  }
  
  dt{color:blue;
  padding:2px;
  }
dl {
 float:left;
 width:auto;
  padding:1px;
}

h2 {text-align: center;}
  
.col {
  border:0px dashed grey;
  float:left;
  width:80px;
  height:100%;
  margin:1px;
  padding:2px;
  }
  
</style>

<!DOCTYPE html>
<html>
<body>
<h2>2013</h2>
<div class="wrapper">
  
<div class="col">
  
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jan 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jan 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jan 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jan 04</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITFeb0313.mp3">Feb 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITFeb0313.mp3">Feb 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITFeb0313.mp3">Feb 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITFeb0313.mp3">Feb 04</a></dt>
</dl>




<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Mar 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Mar 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Mar 08</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Mar 10</a></dt>
</dl>
</div>

<div class="col">
  
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Apr 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Apr 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Apr 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Apr 04</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITMay0313.mp3">May 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITMay0313.mp3">May 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITMay0313.mp3">May 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITMay0313.mp3">May 04</a></dt>
</dl>




<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jun 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jun 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jun 08</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jun 10</a></dt>
</dl>
</div>

<div class="col">
  
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jul 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jul 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jul 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Jul 04</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITAug0313.mp3">Aug 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITAug0313.mp3">Aug 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITAug0313.mp3">Aug 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITAug0313.mp3">Aug 04</a></dt>
</dl>




<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Sep 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Sep 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Sep 08</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Sep 10</a></dt>
</dl>
</div>

<div class="col">
  
<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Oct 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Oct 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Oct 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Oct 04</a></dt>
</dl>

  

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNov0313.mp3">Nov 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNov0313.mp3">Nov 02</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNov0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNov0313.mp3">Nov 04</a></dt>
</dl>




<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 01</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 08</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Dec 10</a></dt>
</dl>
</div>


  

  
 
</body>
</html>

Last edited by rmcellig (2013-10-07 17:02:35)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#16 2013-10-07 18:13:16

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

wait, yeah it should be so you add the shows at the bottom.... hang on.
ahh good you can.

You mean centered? or what...
the reason divs are so cool, is so you can wrap stuff up.
play with the wrapper width. to move it around.
padding and margins - you can have padding-left, etc for more control.

fun eh?

Last edited by wuxmedia (2013-10-07 18:22:41)

Offline

#17 2013-10-07 21:19:26

spooky
#! Member
From: Србија
Registered: 2013-07-09
Posts: 55
Website

Re: Need advice with html table [SOLVED]

rmcellig wrote:

I was playing around on the w3schools site and this is what I came up with. I like it. This is what I want to do but now how do I get these into columns, and did I enter the codes correctly? I think I messed up with the <div> because I wasn't sure what I was doing. I think I am making headway and it looks like if I need to make changes, it's pretty easy.

I just need a little more guidance as to styling this code as well. Once I get the structure right, I'm good to go!!

This works as well without divs.

<!DOCTYPE html>
<html>
<body>

<dl>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
<dt><a href="http://sd.mcran.com/assets/shows/2013/ITNOV0313.mp3">Nov 03</a></dt>
</dl>

</body>
</html>

Just playing around with styles and this is what I come up with. Have to put this in four columns. Not sure what to do. Am I on the right track?

There is light at the end of this tunnel! I just need a little more help assuming I am on the right track. smile


No, I am afraid that You still aren't.

You are not using dl lists properly.
There are three elements in total, that each dl should have.

<dl> <-- Definition list wrapper --> 

 <dt>At least one, DT tag. It is a definition term.</dt> 

  <dd>These are the ones You want to repeat one after another.. </dd> 
  <dd> ... and place links within. </dd> 
  <dd>This is the same as LI within UL or OL list - NOT - DT tag ...</dd>
  <dd> ...like You already typed in.</dd>

</dl>

You can use one dt and than one dd.. and after that one more dt and than thirty dd's ..
BUT, You can't *(you shouldn't) use Just dt's without dd's at all.

If You don't need dt (term) tag, but just a definition items in the list (dd tags), than put one empty dt tag and place dd's afterwards as many you need. It is not me with some specific rules, but W3C, where at least ONE dt tag is mandatory as well as at least one dd, where You can have limtless number of dd tags for each DT, since global acception of HTML5 standard, which is - future. Still draft, though.

Simple sample, basic css for some dl.someClass list

dl.someClass {
 display:block; /* or table */
}

dl.someClass dt {
 background-color:LightGrey; 
}

dl.someClass dd {
 border-left: 2px solid DarkOrange;
}

Last edited by spooky (2013-10-07 21:35:22)


You can't make a baby for one month by making 9 women pregnant.

Offline

#18 2013-10-08 13:03:40

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

I am starting to populate my site with this new code and everything looks fine except for one thing. This part of the CSS is causing problems. Some of the links on my page don't work, and the page design is broken. I nailed down the culprit. It's the float:left; part of the code below. When I remove it, my page is messed up but all the links work and the page style I am using (I use Yola.com for my site) looks normal. Any ideas how I can get around this?

http://www.mcran.com/it2013.php

.col {
  border:0px dashed grey;
  float:left;
  width:170px;
  height:100%;
  margin:1px;
  padding:2px;
  }

Last edited by rmcellig (2013-10-08 13:04:43)


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#19 2013-10-08 13:19:10

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

you mean it doesn't fit into the white box..?

give your div 'wrapper' some height. 500px was enough.
PRO HINT; get firebug plugin for iceweasel, or my preference is devtools in chrome; (inspect element, right click)
it's a bit tricky to work out what's going on, but roll over the html and it displays what that actually is on the page. you can then tweak the CSS on the right, just click to add a new attribute. Or tweak existing ones.
very handy for positioning things etc, then write it into your sites CSS.
this explains more;
https://developers.google.com/chrome-developer-tools/

Offline

#20 2013-10-08 13:29:25

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Ya. If you look at my home page www.mcran.com, you will see what I mean. Funny thing is that some of the links are affected as well.
I used Firebug a few years ago. Very handy tool. I guess because I don't do a lot of web design, only what I need to get done, I forgot about it. I'll also contact Yola as well and see what they come up with. Funny that the float left would affect the page so much.


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

#21 2013-10-08 14:46:07

wuxmedia
wookiee madclaw
From: Back in Blighty
Registered: 2012-03-09
Posts: 1,469
Website

Re: Need advice with html table [SOLVED]

so it worked?
looks fine to me...

float left, or right is amazingly effective. Depending on what your doing.
thing is you're inserting it into an existing framework. so you have to take their CSS into account.

Offline

#22 2013-10-08 16:58:04

rmcellig
#! Die Hard
From: Ottawa, Canada
Registered: 2012-11-15
Posts: 547
Website

Re: Need advice with html table [SOLVED]

Ya. That's what I found out. Thanks wuxmedia.


Cheers Randy
www.mcran.com - my web site
www.chuo.fm - My radio show Sundays  noon-2pm EST or 89.1 fM

Offline

Board footer

Powered by FluxBB

Copyright © 2012 CrunchBang Linux.
Proudly powered by Debian. Hosted by Linode.
Debian is a registered trademark of Software in the Public Interest, Inc.

Debian Logo