How to Add Style to a Table ID in Jquery
Using jQuery makes it easier to implement dynamic visual effects on Web pages without needing to be an expert in JavaScript. This JavaScript library was designed to use CSS (Cascading Style Sheet) selectors, so it helps to know CSS when writing jQuery. When you want to add styles to an HTML element -- such as a table -- using jQuery, you can do so using the ".css()" function. Styles go inside this function, but they require a slightly different formatting than the CSS that goes inside regular style sheets.
Other People Are Reading
Instructions
-
-
1
Open your Web page containing the table in Notepad or a code editor. Locate the opening "<table>" tag and find its ID name:
<table id="mytable">
Add an ID name if your table does not yet contain one.
-
2
Place this code above the closing "</head>" tag if your Web page does not yet include the jQuery library file:
<script type="text/css" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-
-
3
Add a pair of "<script>" tags below the "<script>" tag that embeds the jQuery library file. Between these tags, write your function to force jQuery to wait for the rest of the page to load:
<script type="text/css">
$(document).ready(function() {
});
</script>
-
4
Write a jQuery selector to select the table by its ID name. This selector goes between the curly braces of the "document ready" function. Add the ".css()" function to the selector so you can begin adding CSS styles to the table:
$('#mytable').css({
});
-
5
Add styles to the table within the ".css()" function:
$('#mytable').css({
'color': 'blue',
'font-family': 'Arial',
'width': '90%'
});
Note how single quotes wrap around both the properties and their values. You can use single or double quotation marks. Separate each line of CSS by a comma.
-
1
