Pitäisi kuvanmukainen sivu luoda, mutta en nyt hoksaa miten sen saisi tehtyä.
1 +---+ 2 | | 3 | | 4 +---+ 5 6 7 8
Eli vasemmalla 5 kpl 1x1 laatikoita, oikealla ylhäällä 3x4 laatikko ja sen alla 3 kpl 1x1 laatikoita.
Miten mahdollista Boostrapilla tai html taulukolla?
Käytä attripuutteja colspan ja rowspan.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> td{ border: 1px solid black; width: 150px; } </style> </head> <body> <table> <tr> <td></td> <td colspan="3" rowspan="4"></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
Pääsisiköhän tästä alkuun ?
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" > <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><html> <style> table { border:none; } td { border-radius: 10px; } </style> </head> <body> <table border="1"> <tr><td >???</td><td colspan="3" rowspan="4" >ok </td></tr> <tr><td >???</td></tr> <tr><td >???</td></tr> <tr><td >???</td></tr> <tr><td >???</td><td>???</td><td>???</td><td>???</td></tr> </table> </body> </html>
Jaahas... dartvaneri kerkesi ennen, no on tässä minun esimerkissä border-radius.
Aihe on jo aika vanha, joten et voi enää vastata siihen.