Tabela / HTML

Dla specjalistów Webmastering
#1

WItam, mam takie pytank:

Jak zrobic tabele która by tak wyglądała:

|:::::::::|::::::::::|:::::::::expressionless:

|:::::::::|::::::::::|:::::::::expressionless:

                     |:::::::::expressionless:

Przez te odstepy to może gorzej wyglądać,ale cos w stylu 2 wiersze komorek, a w 3 wierszu komorka sama, jedna, i po prawej stronie tabeli.

#2

Ja bym zrobił komórkę bez obramowania. Ew z div’ów możesz takie coś sklecić, ale to już nie będzie table tylko div :stuck_out_tongue:

#3

W ostatnim wierszu musisz wyłączyć obramowanie w dwóch pierwszych komórkach, inaczej się tego na tabelach zrobić nie da.

#4

Pierwsze rzędy:

<tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
    <td>Komórka 2</td>
</tr>

trzeci:

<tr>
    <td colspan="2" class="disable-cells"></td>
    <td>Samotna komórka</td>
</tr>

plus CSS:

.disable-cells {
    border: none;
}

demo:

https://jsfiddle.net/ufg8wgnh/

Bez CSS też zadziała, możesz zobaczyć jaka będzie różnica.

#5

 

<table border="1">
    <tr><td>Number</td><td>Number</td><td>Number</td></tr>
    <tr><td>Number</td><td>Number</td><td>Number</td></tr>
    <tr><td colspan="2" style="border-style:none"></td><td>Number</td></tr>
</table>

Albo:

<table cellspacing="0">
	<tr><td>Number</td><td>Number</td><td>Number</td></tr>
	<tr><td>Number</td><td>Number</td><td>Number</td></tr>
	<tr><td colspan="2" style="border-style:none"></td><td>Number</td></tr>
</table>

td{
	border:1px solid blue;
	padding:0;
	margin:0;
}