tabel gevraagd

Stormbringer · 1 jan 2013

Hallo,

kan iemand misschien even een tabel in elkaar zetten? Ik krijg het niet voor elkaar.....
Ik wil graag een tabel zoals onderstaand met een balk colspan over 6 vlakken en dan 4 rijen vlakken onder elkaar.

Met daarbij 1 belangrijke opmerking: alle afmetingen in procenten!

Ook wil ik graag dat de grijze achtergrond zichtbaar blijft, dus de tabelgrootte moet bijv. 90% bij 90% worden....

Wie kan dit even voor me maken??? Alvast dank!

CaptainBri · 3 jan 2013

Zonder javascript:

HTML:

<!doctype html>
<html>
<head>
   <style type="text/css">
   html,body{
      height:100%;
      padding: 0;
      margin: 0;
   }

   body{
      background-color: grey;
   }

   .fill{
      height:5%;
   }

   table{
      width:90%;
      height:90%;
      margin:0 auto;
      border-collapse: collapse;
   }

   table td{
      width:16.667%;
      height:16.667%;
   }

   .pink{
      background-color: purple;
   }

   .blue{
      background-color: lightblue;
   }

   .orange{
      background-color: orange;
   }
   </style>
</head>
<body>
   <div class="fill"></div>
   <table>
   <tbody>
      <tr>
         <td class="pink"></td>
         <td class="pink"></td>
         <td class="pink"></td>
         <td class="pink"></td>
         <td class="pink"></td>
         <td class="pink"></td>
      </tr>
      <tr>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
      </tr>
      <tr>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
      </tr>
      <tr>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
      </tr>
      <tr>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
         <td class="blue"></td>
         <td class="orange"></td>
      </tr>
   </tbody>
</table>
   <div class="fill"></div>
</body>
</html>

Met javascript:

HTML:

<!doctype html>
<html>
<head>
	<style type="text/css">
	html,body{
		height:100%;
		padding: 0;
		margin: 0;
	}

	body{
		background-color: grey;
	}

	.fill{
		height:5%;
	}

	table{
		width:90%;
		height:90%;
		margin:0 auto;
		border-collapse: collapse;
	}

	table td{
		width:16.667%;
		height:16.667%;
	}

	.pink{
		background-color: purple;
	}

	.blue{
		background-color: lightblue;
	}

	.orange{
		background-color: orange;
	}
	</style>
</head>
<body>
	<div class="fill"></div>
	<table id="table"></table>
	<div class="fill"></div>

	<script type="text/javascript">
	var table = document.getElementById("table");
	var firstRow = table.insertRow(table.rows.length);
	for(var i = 0; i < 6; i++){
		var cell = firstRow.insertCell(i);
		cell.className = "pink";
	}

	var counter = 0;
	for(var i = 0; i < 4; i++){
		var row = table.insertRow(table.rows.length);
		for(var tdcount = 0; tdcount < 6; tdcount++){
			if(counter % 7 == 0){
				counter++;
			}
			var cell = row.insertCell(tdcount);
			cell.className = (counter % 2 == 0) ? "blue" : "orange";
			counter++;
		}
	}
	</script>
</body>
</html>

DUTCHBloggz · 6 jan 2013

Wat heb je gedaan

Ik weet je hebt hem al maar je vraagt nu gewoon om kant en klare dingen mag ik je vragen wat je hebt gebropeerd en of je al hebt gezocht op google

tabel gevraagd

Stormbringer

Gebruiker

CaptainBri

Gebruiker

DUTCHBloggz

Banned

Nieuwste berichten

Wij waarderen jouw privacy