[Best practice] klikbare tabelrij

[P.O. Box]

in een admin systeem heb ik een lijst / tabel met items... nu wil ik dat een rij uit de tabel klikbaar is, om op die manier een item te bewerken...

mijn vraag is nu wat de "beste" of meest gangbare manier is om dit op te bouwen:

bijv. optie 1 :

HTML:

<style>
a {
display: inline-block;
height: 100%;
width: 100%;
}
</style>
<table>
<tr>
<td><a href="link1">Bedrijfsnaam1</a></td>
<td><a href="link1">Contactpersoon1</a></td>
<td><a href="link1">Type1</a></td>
</tr>
<tr>
<td><a href="link2">Bedrijfsnaam2</a></td>
<td><a href="link2">Contactpersoon2</a></td>
<td><a href="link2">Type2</a></td>
</tr>
</table>

of optie 2:

HTML:

<table>
<tr onclick="document.location.href='link1';">
<td>Bedrijfsnaam1</td>
<td>Contactpersoon1</td>
<td>Type1</td>
</tr>
<tr onclick="document.location.href='link2';">
<td>Bedrijfsnaam2</td>
<td>Contactpersoon2</td>
<td>Type2</td>
</tr>
</table>

of optie 3:

HTML:

<table>
<tr>
<td>Bedrijfsnaam1</td>
<td>Contactpersoon1</td>
<td>Type1</td>
<td>
<a href="link1">Bewerken</a>
</td>
</tr>
<tr>
<td>Bedrijfsnaam2</td>
<td>Contactpersoon2</td>
<td>Type2</td>
<td>
<a href="link2">Bewerken</a>
</td>
</tr>
</table>

Of optie 4, 5 en 6:
hetzelfde als hierboven, maar dan in een geneste UL ipv in een TABLE
mij lijkt dat deze data semantisch gezien in een tabel thuishoort, maar misschien denken jullie er anders over?

Of optie 7:

HTML:

<style>
div {
    display: table;
}

a {
   display: table-row;
}

span {
    display: table-cell;
}
</style>
<div>
<a href="link1">
<span>Bedrijfsnaam1</span>
<span>Contactpersoon1</span>
<span>Type1</span>
</a>
<a href="link1">
<span>Bedrijfsnaam1</span>
<span>Contactpersoon1</span>
<span>Type1</span>
</a>
</span>

of optie 8, een hele andere manier

wat raden jullie aan?

[Tarilo]

Optie 1 of 3, want dan kunnen mensen ook nog gebruikmaken van je website als javascript uitstaat. Wellicht dat optie 3 duidelijker is voor de gebruiker aangezien dan duidelijk aangegeven wordt dat je de rij kan bewerken. Als de rij klikbaar is weet de gebruiker niet wat er gebeurt als deze erop klikt.

[Rekcor]

Ik zou maken dat de tabelrij oplicht, en dat je een edit-icoontje bij je muis ziet + uitleg 'Click to edit'. Scheelt je horizontale schermruimte.

Over mensen die JavaScript uit hebben staan, zou ik me niet zo'n zorgen maken.

[ Voor 8% gewijzigd door Rekcor op 09-02-2013 20:47 ]

[f_blom]

wil je dat er een link in een vak van je tabel zit waarop je moet klikken of wil je dat een vak van de tabel klikbaar is.
Als dat laatste van toepassing is kan je het zo proberen:

<a href="link1"><td>Bewerk</td></a>

[RoboticPro]

Momenteel ben ik ook bezig met zo'n pagina en ik doe het als volgt:



De opbouw ervan is gedaan met een tabel, ik weet eigenlijk niet of dit helemaal
correct is maar dacht van wel.

[P.O. Box]

n.a.v. de post van Tarilo ben ik idd voor optie 3 gegaan... dus zoals hierboven gedaan door RoboticPro...