Those appear on a customized page for Scribbld. There's a tutorial on how to make those right here to start you out.
The rest of the work is just tables. I took a look at the source, and in both cases it is a series of nested tables. For the look with three "boxes" per row you start with an original <table width="900"> (or whatever width you want), and then, without closing that table tag, progress on to your first cell of <table width="300"><tr><td> etc. with all your contents for the first cell. Close the cell by ending that table and begin the next. When you've reached the third, put in a <br> to start another row. Or at least, that's how it's been done in this example.
I can't help but think, though, that if you're going for a look like the second one that you wouldn't need all the nested tables they've used, though I haven't yet tried it out. I think defining a thick, solid border of the same colour as your background would result in the same appearance as this. Anyhow, the guide for making tables if you need some help is located here.
Remember that a lot of work can be done by the CSS you put into the page! Fonts and aspects of the table can all be worked in up there.