-1

--Note: I am still pretty new to CSS and html)--

Trying to practice my coding (CSS, HTML) further, I decided to make a little thing for myself. Part of the screen(html page) will be filled with little blocks like below. These are all the same sizes, but can have different colors (1 column=1color) and different text in them (as shown below). They should also allow to have images in them. Each little block will be a different link.

In total there can be over 50 (max 5 in a column) of such little blocks, with each a different text (size,weight,(not-)capitalized) or image and a different link. In the back of my head I am also thinking of adding Javascript to interact with them (as in open the link, or even adding/deleting blocks)

Now I was wondering how I would do it. I see two options: tables and divs.

They both have there pros and cons, and so I would like to ask your opinion on it. Why going one way or the other? Any other solutions I might have overlooked?

EDIT: Short summary of my idea(lacking time):

  1. DIV:
    • Easier to modify each div
    • easier with java
    • easier to modify text or images in it
    • seems to enjoy my preference
    • editing space between blocks(padding) and blocks with the side needs extra code
  2. Table:
    • easier to make many at once
    • clearer code
    • Harder to modify text style or image of each block

Example

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
PSZ_Code
  • 1,015
  • 10
  • 29

3 Answers3

1

you can do with divs , divs with css tables or plain old html tables.

if you need absolute positions and width/height go with div.

if you need cells that can extend by own, go with table.

css tables is pretty new and i haven't used it much so you have to decide for yourself. the tendency in building web pages is to use divs nowadays with little or no tables. but its up to you.

btevfik
  • 3,391
  • 3
  • 27
  • 39
0

Easiest way will just be have a load of floated divs. You should never use tables for content layout, only for things that should be displayed in a table

eg.

float:left;
margin:10px 10px 0 0;
width:50px;
height:50px;

Then, if they're all different colours you can style that either inline, or with some more classes

0

If you're planning to make them interactive. You definitely should use Divs. They are easier to use with Javascript