by Joel Limardo
Home | Twitter | LinkedIn | Consulting | About | RSS | Map
Areas:
Process
 
Technical
 
Projects:


Wed, 15 Feb 2017

HTML/CSS Samples

I have this very old book (I'll skip the name/author) on designing web sites using HTML and tables -- something nearly verbotten nowadays. Anyway, I got the idea of redoing the examples using CSS. I'm no CSS expert and some of these examples simply may not work across all browsers but here they go.



posted at: 17:39 | path: /technical/markup/HTML/CSS | this entry | top

Cellpadding and Cellspacing

Here's what I changed to achieve the equivalent of the old cellpadding and cellspacing properties that you would use on an HTML table (output is a diff from the last example to this one):


8,9c8,9
<              float : right;
<              width : 200px;
>              float : left;
>              width : 400px;

11c11 < border-spacing: 2px;
> border-spacing: 10px;
20c20 < padding: 2px; > padding: 10px;

22a23,25 > .aTableCellLeft { width: 40%; } > .aTableCellRight { width: 50%; } >

28,29c31,32 < float : right; < width : 100px; > float : left; > width : 200px;

52,53c55,56 < <span class="aTableCell" id="span1">This is my first table cell</span> < <span class="aTableCell" id="span2">This is my second table cell. Second cells are really not that big a deal.</span> > <span class="aTableCell aTableCellLeft" id="span1">This is my first table cell</span> > <span class="aTableCell aTableCellRight" id="span2">This is my second table cell. Second cells are really not that big a deal.</span>



posted at: 17:35 | path: /technical/markup/HTML/CSS | this entry | top


Mon, 13 Feb 2017

Simple Table w/Media Query

Table-like design need not do without media queries. I used the same idea behind the media query example and applied it to the first example).

Again, here is the markup:

Here's the thing: you have to be wary of the order of your CSS. If the media query came before the base definition the results would be different. Try it yourself.



posted at: 18:13 | path: /technical/markup/HTML/CSS | this entry | top


Sat, 11 Feb 2017

Interlude 1: Media Queries

One minute -- this book was written back before media queries. I've created a very simple example of a media query that changes some text when you change the size of the screen. I'll have to apply this to a table design if I'm to use tables generally in design across devices.



posted at: 19:45 | path: /technical/markup/HTML/CSS | this entry | top


Wed, 08 Feb 2017

Simple Table


The very first example was, unsurprisingly, to build a table and then add some text to the cells. The text is of different sizes (one has more characters than the other -- a significant point as you can see). Here is the markup:



posted at: 19:03 | path: /technical/markup/HTML/CSS | this entry | top

© 2015-2017. All Rights Reserved. All original code appearing on this site is MIT Licensed unless otherwise noted.