• I have created a table to house a simple staff directory.

    <table class="staff">
    	<col width="110">
    	<col width="220">
    	<col width="50">
    	<col width="110">
    	<col width="220">
    
    	<tr>
    		<td><p><a href="https://gse.buffalo.edu/about/directory/faculty/2039" target="_blank"><img src="https://gse.buffalo.edu/gsefiles/images/faculty/1.jpg?1297976809" width="100" height="130"></a></p>
    		</td>
    		<td><div><b>Director</b></div>
    			<div><b>Associate Professor</b></div>
    			<div><a href="https://gse.buffalo.edu/about/directory/faculty/2039">Mary McVee, Ph.D. </a></div>
    			<div>716.645.2458</div>
    			<div>[email protected]</div>
    		</td>
    
    		<td>&nbsp;</td>
    
    		<td><p><a href="https://gse.buffalo.edu/about/directory/faculty/9412" target="_blank"><img src="https://gse.buffalo.edu/gsefiles/images/faculty/Ashlee%20Ebert.jpg?1256757499" width="100" height="130"></a></p>
    		</td>
    		<td><div><b>Associate Director</b></div>
    			<div><b>Instructor</b></div>
    			<div><a href="https://gse.buffalo.edu/about/directory/faculty/9412">Ashlee Ebert, Ph.D.</a></div>
    			<div>716.645.1058</div>
    			<div>[email protected]</div>
    		</td>
    	</tr>
    
    	<tr>
    		<td><p><a href="https://gse.buffalo.edu/about/directory/faculty/9416" target="_blank"><img src="https://gse.buffalo.edu/gsefiles/images/faculty/tynan.jpg?1255468952" width="100" height="130"></a></p>
    		</td>
    		<td><div><b>Instructor</b</div>
    			<div><b>Clinical Assistant Professor</b></div>
    			<div><a href="https://gse.buffalo.edu/about/directory/faculty/9416">Elizabeth Tynan, Ph.D. </a></div>
    			<div>716.645.4077</div>
    			<div>[email protected]</div>
    		</td>
    
    		<td>&nbsp;</td>
    
    		<td><p><a href="https://about.me/tylerrinker/" target="_blank"><img src="https://i.imgur.com/hAXNaAi.png" width="100" height="130"></a></p>
    		</td>
    		<td><div><b>Research Project Manager</b></div>
    			<div><a href="https://about.me/tylerrinker/">Tyler Rinker, M.Ed.</a></div>
    		</td>
    	</tr>
    
    </table>

    with:

    table.staff{
    	font-size:14px;
    	margin:0 auto;
    	border-collapse: collapse;
    	padding: 0px;
    	text-align: center;
    }

    added to the style.css. When I do this as stand alone code in a browser it looks as expected. However on the website the table is poorly formatted. The text comes below the pictures and doesn’t start at the top of the cell.

    What should I do to get the table so that the pictures and text are centered vertically and horizontally in each cell (and text doesn’t hang below images)?

    The middle column is a dummy column intended to give space between the people. In the visual view of the page the table looks like it’s well formatted but does not render as so.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Format Table’ is closed to new replies.