Make without tables

Hi!! I want to do this report using html5 and css3.
Somebody can to talk to me how to do this?
thanks.

 

This may help

http://www.tablesgenerator.com/html_tables

Code (markup):

 

That is plainly and obviously tabular data... NOT using a table is non-semantic markup and 100% incorrect, EVEN in the steaming pile known as HTML 5. Anyone telling you not to use a table for THAT needs a serious quintuple helping of sierra tango foxtrot uniform, as they don't know enough about HTML to be flapping their gums on the subject. That is EXACTLY the type of data tables exist to deliver. (as opposed to say... tables for layout which is when you're NOT supposed to use tables.)

This is the semantically correct markup for that EVEN IN HTML 5 is:

<table id="data">
	<thead>
		<tr>
			<th scope="col">ID</th>
			<th scope="col">CODIGO</th>
			<th scope="col">NOMBRES</th>
		</tr>
	</thead><tbody>
		<tr>
			<th scope="row">1</th>
			<td>100</td>
			<td>JUAN</td>
		</tr><tr>
			<th scope="row">2</th>
			<td>200</td>
			<td>JOSE</td>
		</tr><tr>
			<th scope="row">3</th>
			<td>300</td>
			<td>PEDRO</td>
		</tr><tr>
			<th scope="row">4</th>
			<td>400</td>
			<td>LUIS</td>
		</tr>
	</tbody>
</table>

Code (markup):

ANYONE telling you otherwise is talking out their ass. The table headings with scope="col" have their content linked to their columns, the th in each row with scope="row" have their content linked to the row.

"modern" CSS to make it look how you want is pretty simple:

#data {
	border-collapse:collapse; /* == cellspacing 0 */
}

#data th,
#data td {
	text-align:center;
	padding:0.2em 0.5em;
	border:1px solid #000;
}

#data thead th {
	color:#FFF; /* black on dark blue illegible, use bright color */
	background:#369;
}

#data tbody th {
	font-weight:normal;
}

#data tbody tr:nth-child(even) th,
#data tbody tr:nth-child(even) td {
	background:#DDD;
}

Code (markup):

There is NOTHING in HTML 5 you should be using to replace that... and for CSS3 the only thing needed is nth-child.

Basically, don't listen to the "tables are evil" whackjobs who fail to grasp when and when not to use tables... tables for layout bad, tables for tabular data is the entire reason they exist and are the proper semantic markup for it!!! ANYONE telling you otherwise is packing you so full of sand you could change your name to Sahara.

 

Tables is the old fashion way to do css and all viusal way of website. But data which should be present in table just put in table

 

No offense, but why the blue blazes do people make gibberish pointless useless posts like that?!? Between the "Englisc, mōdor wyrter! Gedōn ēow cweþan hit!?!", complete lack of anything resembling rational thought, and adding NOTHING of value to the discussion... Some serious whiskey tango foxtrot posts that constitute little more than spam; yet seem to be around 2/3rds of the posts ever day.

 

Only tables? well but in my case I have a data from MySQL and how I do to put one row in one color and the other row in other color, etc.?
Do you understand me?

 

If you simply mean alternating colors per row, I provided that using nth-child(even). If you want specific colors per row, say WHY (not what color) as a class on the TR in the markup.

I just made a quick PHP demo showing it working using an array to fake typical database type data.
http://www.cutcodedown.com/for_others/piropeator/testTable.php

There's a .rar in that directory containing the files used to do it.
http://www.cutcodedown.com/for_others/piropeator/piropeator.rar

The core code for it is pretty simple.

echo '

<table id="data">
	<thead>
		<tr>
			<th scope="col">ID</th>
			<th scope="col">CODIGO</th>
			<th scope="col">NOMBRES</th>
		</tr>
	</thead><tbody>
		';
	
foreach ($testData as $row) echo '<tr>
			<th scope="row">', $row['id'], '</th>
			<td>', $row['codigo'], '</td>
			<td>', $row['nombres'], '</td>
		</tr>';
		
echo '		
	</tbody>
</table>';

Code (markup):

If you were reading from a database, you'd just change this line:

foreach ($testData as $row) echo '<tr>

to something like:

while ($row = $db->fetch()) echo '<tr>

As you can see, it auto-colors alternating rows thanks to the nth-child(even) in the CSS... That's what you're aiming for, right?

If you wanted some other colors based on the data stored in each database row instead of a simple alternating color, you would just add a class to that TR saying why.

 

Interesting. I going to setting my report and I tell you my news.
Thanks.