To find out the number of lines and columns you need to output, you should check the window width and height and change it accordingly. Remember to listen to onResize events and modify the width and height accordingly.
When you want to do this the textual way, you could do this using text with a monospaced font and a table where each cell contains one character.
To address individual characters you could create a
<table> with the correct number of rows and columns, where each
<td> has an ID consisting of its x- and y- coordinates. That way you can address individual cells by ID and change their innerHTML to change the letter and change their css class to change their color.
Using a canvas, however, might be faster because you don't have to manipulate a large DOM tree for each character you have to replace. Dwarf Fortress is doing a similar thing, by the way. The characters which are used to represent objects are actually bitmaps, not true text output, and they are drawn using 2d graphic APIs. The HTML5 canvas is well-equipped for this. It has the context.fillText method which allows you to draw text on the canvas. This can be used to draw individual characters. You can change the size and font face by manipulating the variables context.font and the color of each letter by calling context.fillStyle.
Note that calling fillText hundreds of times per frame could be slow, because rasterizing fonts is expensive and no browser I know of uses caching. That means that when you render the same letter with the same settings a hundred times, it will be re-rasterized a hundred times. To increase the performance you could cache the rasterized appearance of each letter with each color on a hidden canvas and then draw these hidden canvases using context.drawImage. Copying from one canvas to another is usually a lot faster than font rasterization.
I am currently developing a 2d game using canvas, and noticed that the largest FPS eater was the font drawing. When I added a cache for rasterized text, it improved performance a lot.