CSS Table

[TicTac]

Hiya,

How do I create a 4x4 (Column x Row) table using CSS?

TicTac

[Dark Tranquility]

These links may help you learn a lot:
http://www.smashingmagazine.com/2006...ern-solutions/
http://veerle.duoh.com/blog/comments...ble_version_2/
http://www.pmob.co.uk/temp/fourcellsboth.htm
http://www.pmob.co.uk/temp/tabledemo.htm

[markbrown4]

HI TicTac,

To make elements align horizontally all you need to do is give the element a width and a float.
So if you wanted a 400px 4x4 'table' layout something like this should work

#tableyGoodness { width: 400px }
#tableyGoodness div {
  float: left;
  width: 100px;
}

<div id="tableyGoodness">
  <div>1 - 1</div>
  <div>1 - 2</div>
  <div>1 - 3</div>
  <div>1 - 4</div>
  <div>2 - 1</div>
  <div>2 - 2</div>
  <div>2 - 3</div>
  <div>2 - 4</div>
  <div>3 - 1</div>
  <div>3 - 2</div>
  <div>3 - 3</div>
  <div>3 - 4</div>
  <div>4 - 1</div>
  <div>4 - 2</div>
  <div>4 - 3</div>
  <div>4 - 4</div>
</div>

Consecutive floats stack up against each other.
But of course - If you are marking up tabular data - the table semantics have much more meaning than the neutral div elements.

Hope it helps

[Dan Schulz]

Easy. Use a table, then use CSS to style it. As Mark said though, it does depend on what purpose the container holding the information inside is for. Is this going to hold tabular data?

[Dark Tranquility]

Is this going to hold tabular data?

Yep! if it is gonna be holding tabular data then you should use

<table summary="summary of the table content">
 
<tr>
<td>fluff</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 
<tr>
<td>more fluff1</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 
<tr>
<td>more fluff2</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 
<tr>
<td>more fluff3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
 
</table> <!--End of your table -->

then style it with CSS! the links I gave you will offer great inspiration