Member Avatar for atticusr5
atticusr5 0 Junior Poster

Hello there,

I am messing with some jquery mobile and I have so simple questions (as in I am a real noob).

My question is in two parts, first first off, what is the best way to center the contents of table cell data? I tried using "align center", but to no success.

Also, is there a way to set the size of of buttons so that all the buttons are the same width?

My code is below, any help or references would be much appreciated!

<!DOCTYPE html> 
<html>
	<head> 
		<title>TJ - Mobile</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
	</head> 
	<body>
		<!--Page Div Starts-->
		<div data-role="page" data-theme="d" >
		
			<!--Header Div Begins-->
			<div data-role="header">
				<img src="" width="100%">
			</div>
			<!--Header Div Ends-->
			<!--Body Div Begins-->
			<div data-role="content">	
				<fieldset>
					<table border="5" align="center">
						<!--R1-->
						<tr align="center">
							<!--R1C1-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Campus News
										</button>
									</div>
								</div>
							</td>
							<!--R1C2-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Sports
										</button>
									</div>
								</div>
							</td>
							<!--R1C3-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Opinion
										</button>
									</div>
								</div>
							</td>
						<tr>
						<!--R2-->
						<tr>
							<!--R2C1-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Culture
										</button>
									</div>
								</div>
							</td>
							<!--R2C2-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<img src="" width="90" height="80">
									</div>
								</div>
							</td>
							<!--R2C3-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Multimedia
										</button>
									</div>
								</div>
							</td>
						<tr>
						<!--R3-->
						<tr>
							<!--R3C1-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Arts & Entertainment
										</button>
									</div>
								</div>
							</td>
							<!--R3C2-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Science & Technology
										</button>
									</div>
								</div>
							</td>
							<!--R3C3-->
							<td>
								<div class="ui-block-a">
									<div data-theme="c">
										<button type="submit" data-theme="a" class="ui-btn-hidden" aria-disabled="false" width="100%">
											Police Blotter
										</button>
									</div>
								</div>
							</td>
						<tr>
					</table>
				</fieldset>
			</div>
			<!--Footer Div Begins-->
			<div data-role="footer" >
				<h4>Mobile Edition Beta 0.04</h4>
			</div>
		</div>
		<!--End Main Div-->
	</body>
</html>
  • 1 Contributor
  • 0 Replies
  • 85 Views

Dani AI

Generated

A couple of focused fixes for 's layout. The HTML align attribute is obsolete and a width attribute on a button element will not reliably size it. Using CSS to center table cells and to size buttons produces consistent, mobile-friendly results and works with jQuery Mobile's styling.

A minimal CSS approach (applies when keeping the table layout):

/* center table cells */
td { text-align: center; vertical-align: middle; }

/* make buttons fill their cell and share the same width */
td button, td .ui-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

Notes: remove any width="..." attributes from the HTML (use CSS instead). jQuery Mobile wraps and restyles native buttons, so targeting the framework class (.ui-btn) or the element inside the cell is appropriate. box-sizing: border-box keeps padding and borders inside the width and prevents visual differences between buttons.

For a cleaner, more maintainable solution, replace table layout with jQuery Mobile's grid or controlgroup so column widths match naturally. See the jQuery Mobile grid and button documentation for examples and behavior: Grid documentation and Button documentation. For details on box-sizing, consult box-sizing on MDN. Troubleshooting tip: inspect computed styles in browser devtools to find framework overrides (padding, borders) that affect final widths.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.